Nuxt, splitting up Vuex store into separate files gives error: unknown mutation type: login

问题

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

回答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.

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

来源：https://stackoverflow.com/questions/51008997/nuxt-splitting-up-vuex-store-into-separate-files-gives-error-unknown-mutation