javascript - Nuxt，将 Vuex 存储拆分为单独的文件会出现错误：未知突变类型：登录

Question

我正在尝试将我的 Nuxt Vuex 存储文件拆分为单独的文件。并且没有将所有Vuex 放入一个巨大的文件中getters。顺便说一下，这个演示项目在 Github 上。mutationsactions

我读过这个官方的 Nuxt Vuex Store 文档；但似乎无法让它工作。在哪里放东西有点模糊。

我在这些文件中有以下内容：

下面是我的：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
        }
    })
}

这是在我的：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,
};

最后在我的：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

score 4 · Accepted Answer

您必须在 store/index.js 文件中像这样导出存储常量：

export default store

将此代码行放在文件的末尾。

score 4 · Accepted Answer

所以正如@jeremy.raza 所描述的，这是我为了让它工作而改变的：

存储/index.js

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,
};