Nuxt, Vuex 저장소를 별도의 파일로 분할하면 오류가 발생함: 알 수 없는 변환 유형: 로그인

Nuxt, Vuex 저장소를 별도의 파일로 분할하면 오류가 발생함: 알 수 없는 변환 유형: 로그인

Nuxt Vuex 스토어 파일을 다른 파일로 분할하려고 합니다.모든 Vuex를 사용할 수 없습니다. getters,mutations그리고.actions하나의 큰 파일로 만듭니다.참고로 이 데모 프로젝트는 Github에서 진행 중입니다.

Nuxt Vuex Store 공식 문서를 읽었는데 제대로 작동하지 않는 것 같습니다.물건을 어디에 둬야 할지 애매해요.

이 파일에는 다음이 있습니다.

다음은 my: store/index.js 입니다.

import Vue from "vue";
import Vuex from "vuex";
import Auth from "./modules/auth";

Vue.use(Vuex);

export const store = () => {
    return new Vuex.Store({
        state: {

        },
        modules: {
            Auth
        }
    })
}

이것은 my: store/auth.js에 있습니다.

const state = () => {
    username: null
};

const getters = {
    username: state => {
        return state.username;
    },
    isAuthenticated: state => {
        return state.username != null;
    }
};

const mutations = {
    login: (vuexContext, username) => {
        vuexContext.username = username;
        this.$router.push("/dashboard");
    },
    logout: vuexContext => {
        vuexContext.username = null;
        this.$router.push("/");
    }
};

const actions = {

};

export default {
    state,
    getters,
    mutations,
    actions,
};

그리고 마지막으로 my: pages/index.vue

여기서 로그인 변환이라고 부릅니다.

<script>
    export default {
        layout: "non-logged-in",
        data() {
            return {
                username: null
            }
        },
        methods: {
            onSubmit() {
                this.$store.commit("login", this.username);
            }
        }
    }
</script>

발생한 오류:

[vuex] unknown mutation type: login

내가 여기서 뭘 잘못하고 있는 거지?나는 내가 모든 물건을 올바르게 수입하고 있다고 생각했다.store/index.js

store/index.js 파일 내에서 다음과 같이 스토어 상수를 내보내야 합니다.

export default store

이 코드 줄을 파일 끝에 넣으세요.

그래서 @jeremy.raza가 설명한 대로 동작시키기 위해 다음과 같이 변경했습니다.

store/index.displaces

import Vue from "vue";
import Vuex from "vuex";
import Auth from "./modules/auth";

Vue.use(Vuex)

const store = () => {
    return new Vuex.Store({
        state: {

        },
        modules: {
            Auth
        }
    })
}

export default store;

store/auth.js 변경 사항

이 문서의 작성 방법의 변경에 주의해 주세요.state,getters그리고.mutations메서드 표기법

const state = () => ({
    username: null
});

const getters = {
    username(state) {
        return state.username;
    },
    isAuthenticated(state) {
        return state.username != null;
    }
};

const mutations = {
    login(vuexContext, username) {
        vuexContext.username = username;
        this.$router.push("/dashboard");
    },
    logout(vuexContext) {
        vuexContext.username = null;
        this.$router.push("/");
    }
};

const actions = {

};

export default {
    state,
    getters,
    mutations,
    actions,
};

언급URL : https://stackoverflow.com/questions/51008997/nuxt-splitting-up-vuex-store-into-separate-files-gives-error-unknown-mutation