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

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.