Nuxt, разбиение хранилища Vuex на отдельные файлы выдает ошибку: неизвестный тип мутации: логин - PullRequest
Новая
       38

Nuxt, разбиение хранилища Vuex на отдельные файлы выдает ошибку: неизвестный тип мутации: логин

0 голосов
/ 24 июня 2018

Я пытаюсь разделить файлы моего хранилища Nuxt Vuex на отдельные файлы . И НЕ объединяйте все Vuex getters, mutations и actions в один огромный файл. Кстати, этот демонстрационный проект на Github .

Я прочитал эту официальную документацию по Nuxt Vuex Store ; но не могу заставить его работать. Немного расплывчато, куда положить вещи.

У меня есть следующие файлы:

Ниже мой: 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

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

Так как @ jeremy.raza описал это, я изменил, чтобы заставить его работать:

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;

Изменения в store / auth.js

Обратите внимание на изменения в том, как я написал нотацию методов state, getters и mutations. 

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,
};
0 голосов
/ 24 июня 2018

Вы должны экспортировать свою константу магазина следующим образом в файл store / index.js: 

export default store

Поместите эту строку кода в конец вашего файла.

...