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

Question

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

Answer 1

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.

Answer 2

So as @jeremy.raza described this is what I changed in order to get it working:

store/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;

Changes in the store/auth.js

Note the changes in how I wrote the state , getters and mutations method notation.

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