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

Solution 1:

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

exportdefault store

Put this code line at the end of your file.

Solution 2:

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

store/index.js

importVuefrom"vue";
importVuexfrom"vuex";
importAuthfrom"./modules/auth";

Vue.use(Vuex)

conststore = () => {
    returnnewVuex.Store({
        state: {

        },
        modules: {
            Auth
        }
    })
}

exportdefault store;

Changes in the store/auth.js

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

conststate = () => ({
    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 = {

};

exportdefault {
    state,
    getters,
    mutations,
    actions,
};