Question

我的问题是，刷新页面后，我会覆盖当前的语言状态：

import Vue from "vue";
import Vuex from "vuex";
import vuexI18n from "vuex-i18n";
import createPersistedState from "vuex-persistedstate";
import toPolish from "./../translations/toPolish";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        currentLanguage: ''
    },
    mutations: {},
    actions: {},
    plugins: [createPersistedState()]
});

Vue.use(vuexI18n.plugin, store);
Vue.i18n.add("pl", toPolish);
Vue.i18n.set(store.state.currentLanguage || store.state.currentLanguage);
export default store;

因此，即使用户在刷新后更改语言，它也将首先具有空字符串值，然后在此行之后

Vue.i18n.set(store.state.currentLanguage || navigator.language);

它将把它设置回我不想使用的浏览器语言，但我也想不出如何解决它。我将不得不做

    state: {
        currentLanguage: store.state.currentLanguage || ''
    },

因此，如果store.state.currectLanguage为空，则如果有一些字符串或为空字符串，它将设置先前的值。但是此解决方案不起作用并给出错误：

store.js？adc6：11未捕获的TypeError：无法读取未定义的属性“状态”

Answer 1

我的问题是我什至没有在语言更改功能上进行任何更改，因此我没有更改vuex存储中的值，实际上我只是在更改要重新呈现选择标志的组件中更改值。

因此将突变更改为：

mutations: {
    changeLang: (state, response) => {
        if(response) {
            state.currentLanguage = response;
        }
    }
},

在正在改变语言的函数中，我犯下了这种突变：

changeLanguage(lang) {
    Vue.i18n.set(lang);
    this.selectedLanguage = lang;
    this.$store.commit('changeLang', lang);
}

现在一切正常。首先，加载语言是用户更改并刷新后保持不变的浏览器语言。

在vuex.store中使用状态

1 个答案: