Nuxt，将Vuex存储拆分为单独的文件会产生错误:未知突变类型:登录 [英] Nuxt, splitting up Vuex store into separate files gives error: unknown mutation type: login

问题描述

我正在尝试将Nuxt Vuex存储文件拆分为单独的文件.并且不要将所有 Vuex getters，mutations和actions放入一个大文件中. demo项目在Github上.

我已阅读此Nuxt Vuex商店官方文档；但似乎无法使其正常工作.在哪里放东西有点模糊.

这些文件中包含以下内容:

以下是我的: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

中正确导入了所有内容

解决方案

您必须这样在store/index.js文件中导出商店常量:

export default store

将此代码行放在文件末尾.

I'm trying to split up my Nuxt Vuex store files into separate files. And NOT have all Vuex getters, mutations and actions into one huge file. This demo project is on Github by the way.

I'v read this official Nuxt Vuex Store documentation; but can't seem to get it working. It's a bit vague on where to put stuff.

I have the following in these files:

Below is 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
        }
    })
}

This is in 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,
};

And finally in my: pages/index.vue

This is where I'm calling that login mutation:

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

The error I'm getting:

[vuex] unknown mutation type: login

What am I doing wrong here? I thought i'm importing all the stuff correctly in the store/index.js

解决方案

You have to export your store constant like this inside your store/index.js file:

export default store

Put this code line at the end of your file.

这篇关于Nuxt，将Vuex存储拆分为单独的文件会产生错误:未知突变类型:登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！