Используйте классический режим Vuex в приложении Nuxt - PullRequest
Новая
       138

Используйте классический режим Vuex в приложении Nuxt

0 голосов
/ 06 февраля 2019

Я переписываю приложение 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;

Теперь ошибка

Uncaught TypeError: store.registerModule не является функцией

Возможно, из-за Vue.use(vuexI18n.plugin, store);.

1 Ответ

0 голосов
/ 06 февраля 2019

Вам необходимо использовать классический режим.

Классический (устарел): 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
}
...