如何更新Vuex Store中Vue-i18n的翻译内容？

问题描述 #

静态添加到Vuex Store中的翻译内容，在更新locale后无法同步更新。执行i18n.locale = 'fr';切换语言后，Store中state的qqq数组里通过i18n.t('yes')等方式静态赋值的name字段并未改变。

原因分析 #

你在Vuex state初始化时直接调用i18n.t('yes')，这是一次性静态赋值——只会在Store创建时执行一次，把当前locale对应的翻译字符串存入state。后续切换locale时，state里的旧字符串不会自动重新调用i18n.t更新，所以内容保持不变。

解决方案 #

方法一：用Vuex Getter动态生成翻译（推荐） #

把state中的qqq只存储需要翻译的key（比如id），通过Getter动态计算翻译后的name字段。每次访问Getter时，都会使用当前locale重新获取翻译结果，自动响应locale变化。

修改后的store.js：

import Vue from 'vue';
import Vuex from 'vuex';
import i18n from '@/js/i18n';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 只存储id，不存静态翻译的name
    qqq: [{ id: 'yes' }, { id: 'no' }]
  },
  getters: {
    // 动态生成带翻译的数组
    translatedQqq: (state) => {
      return state.qqq.map(item => ({
        ...item,
        name: i18n.t(item.id)
      }))
    }
  },
  actions: {
    async GET_USER({ state }, context, payload) {
      // 从服务器获取locale的逻辑
      
      // 切换locale
      i18n.locale = 'fr';
    },
  }
});

export default store;

在组件中，使用this.$store.getters.translatedQqq代替直接访问this.$store.state.qqq即可。

方法二：切换locale时手动更新state #

如果需要保留state中存储完整对象的结构，可以在切换locale后，手动触发mutation更新qqq数组的翻译内容。

修改后的store.js：

import Vue from 'vue';
import Vuex from 'vuex';
import i18n from '@/js/i18n';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    qqq: [{ id: 'yes', name: i18n.t('yes') }, { id: 'no', name: i18n.t('no') }]
  },
  mutations: {
    // 定义更新翻译的mutation
    UPDATE_QQQ_TRANSLATIONS(state) {
      state.qqq = state.qqq.map(item => ({
        ...item,
        name: i18n.t(item.id)
      }))
    }
  },
  actions: {
    async GET_USER({ commit }, context, payload) {
      // 从服务器获取locale的逻辑
      
      // 切换locale
      i18n.locale = 'fr';
      // 触发mutation更新翻译
      commit('UPDATE_QQQ_TRANSLATIONS');
    },
  }
});

export default store;

说明 #

• 方法一无需手动维护更新逻辑，完全响应式，是更符合Vuex设计思想的方案。
• 方法二适合有特殊业务需求（比如需要缓存翻译结果、减少重复计算）的场景。

内容的提问来源于stack exchange，提问作者magistr4815