在 Nuxt 应用中使用 Vuex 经典模式

Question

我正在将 Vue 应用程序重写为 Nuxt 架构，因为我们需要 SSR。但是我不想重写 Vuex 存储文件，它是：

import Vue from "vue";
import Vuex from "vuex";
import vuexI18n from "vuex-i18n/dist/vuex-i18n.umd.js";
import toEnglish from "../translations/toEnglish";
import toSpanish from "./../translations/toSpanish";
import toGerman from "./../translations/toGerman";
import toRussian from "./../translations/toRussian";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        currentLanguage: ''
    },
    mutations: {
        changeLang: (state, response) => {
            if(response) {
                state.currentLanguage = response;
                Vue.i18n.set(response);
                console.log(response);
            }
        }
    }
});

Vue.use(vuexI18n.plugin, store);
Vue.i18n.add("en", toEnglish);
Vue.i18n.add("es", toSpanish);
Vue.i18n.add("de", toGerman);
Vue.i18n.add("ru", toRussian);

export default store;

我知道 Nuxt 有其他一些方法，但我真的想坚持上面的代码。不幸的是，我无法通过以下方式从我的组件中调用突变：

this.$store.commit('changeLang', lang)

在控制台打印错误：

[vuex] 未知突变类型：changeLang

我也试过这样

this.$store.commit('store/changeLang', lang)

但错误是一样的。如何解决？我是否需要重写这个 vuex 文件才能使其工作？

---

我按照@Aldarund的提示将上面的代码更改为：

import Vue from "vue";
import Vuex from "vuex";
import vuexI18n from "vuex-i18n/dist/vuex-i18n.umd.js";
import toEnglish from "../translations/toEnglish";
import toSpanish from "./../translations/toSpanish";
import toGerman from "./../translations/toGerman";
import toRussian from "./../translations/toRussian";

const store = () => {
    return new Vuex.Store({
        state: () => ({
            currentLanguage: ''
        }),
        mutations: {
            changeLang: (state, response) => {
                if (response) {
                    state.currentLanguage = response;
                    Vue.i18n.set(response);
                    console.log(response);
                }
            }
        }
    })
};

Vue.use(vuexI18n.plugin, store);
Vue.i18n.add("en", toEnglish);
Vue.i18n.add("es", toSpanish);
Vue.i18n.add("de", toGerman);
Vue.i18n.add("ru", toRussian);

export default store;

现在错误是

未捕获的类型错误：store.registerModule 不是函数

可能是因为Vue.use(vuexI18n.plugin, store);。

Answer 1

您需要使用经典模式。

经典（已弃用）：store/index.js 返回一个方法来创建一个 存储实例

所以它应该看起来像这样，没有使用 vuex，在导入 Vue 时。而且它必须是 crestr 存储的函数，而不是普通的 vuex 对象

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      counter: 0
    }),
    mutations: {
      increment (state) {
        state.counter++
      }
    }
  })
}

export default createStore

文档https://nuxtjs.org/guide/vuex-store/#classic-mode

至于插件，例如vyexi18 您需要将该代码移动到插件文件中并从上下文https://nuxtjs.org/guide/plugins/ 获取创建的存储对象@

export default ({ store }) => {
  Your vuex18initcode
}