时间戳

首页 > 解决方案 > 在 Vuetify.js 插件中使用 vuex 状态

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

问题描述

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

我的项目是根据用户的首选语言翻译网站。我已经用 i18n 完全设置了翻译。该项目由 2 个部分组成。

  1. 基于 JSON 文件的翻译（这工作得很好）
  2. Vuetify 组件的翻译基于 Vuetify 提供的翻译。

第二点是我卡住的地方。根据 Vuetify 的手册，您需要在 Vuetify.js 插件中导入所需的语言文件。这一切都很完美。

但是......我只能手动更改它......

我想要实现的是根据我的 vuex 商店中设置的语言设置正确的 Vuetify 语言。相信我，我已经在互联网上搜索了好几天，并尝试了所有我能找到的东西。但似乎没有任何效果。我似乎无法弄清楚如何在 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 store中的状态为准。

这是我的 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()]
})

谁能正确地指出我该由谁去做？

标签： vue.jsvuexvuetify.js

解决方案

当您更改语言环境时，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()]
})

推荐阅读