在Vuetify.js插件中使用vuex状态

Question

我对在Vuetify.js插件中调用vuex状态感到非常困惑。

我的项目是翻译一个基于用户首选语言的网站。我已经用i18n完全安装了翻译。本项目由两个部分组成。

1. 基于JSON文件的翻译(这工作得很好)
2. 根据Vuetify.

提供的翻译来翻译Vuetify组件

第二点是我被困在哪里。根据Vuetify的手册，您需要在Vuetify.js插件中导入所需的语言文件。一切都很完美。

但是.我只能手动修改..。

我想要实现的是，正确的Vuetify语言是建立在我的vuex商店里的语言集合中的。相信我，我已经在网上搜索了好几天，并且尝试了我能找到的所有东西。但似乎什么都起不到作用。我似乎不知道如何在Vuetify.js插件中调用vuex状态。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

import nl from 'vuetify/es5/locale/nl'
import fr from 'vuetify/es5/locale/fr'
import en from 'vuetify/es5/locale/en'

Vue.component('my-component', {
 methods: {
    changeLocale() {
        this.$vuetify.lang.current
    },
 },
})
export default new Vuetify({
 lang: {
    locales: { nl, en, fr },
    current: "nl",
},
})

因此，current的状态应该基于我的vuex商店中的状态。

这是我的vuex商店

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import i18n, { selectedLocale } from './i18n'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    locale: selectedLocale
  },
  mutations: {
    updateLocale(state, newLocale) {
      state.locale = newLocale
    }
  },
  actions: {
    changeLocale({ commit }, newLocale) {
      i18n.locale = newLocale
      commit('updateLocale', newLocale)
    }
  },
  plugins: [createPersistedState()]
})

谁能给我指指点点，告诉我该由谁来做这件事？

Answer 1

当您在i18n中更改区域设置时，您还应该在Vuetify中更改它：

export default new Vuex.Store({
  state: {
    locale: selectedLocale
  },
  mutations: {
    updateLocale(state, newLocale) {
      state.locale = newLocale
    }
  },
  actions: {
    changeLocale({ commit }, { newLocale, currentVueComponent }) {
      i18n.locale = newLocale
      currentVueComponent.$vuetify.lang.current = newLocale // <--- the important code
      commit('updateLocale', newLocale)
    }
  },
  plugins: [createPersistedState()]
})