VueJs VueX vue-i18n 翻译的实现

Question

有一个 main.js -> App.vue -> router/index.js -> Index.vue

在 Index.vue 中，我尝试运行 vue-i18n (7.8.0)，其中数据将由 VueX 存储提供：

// ...
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

export default {
   name: 'index',
    // ...
    computed: {
    ...mapGetters({
      language: 'getLanguage',
      translations: 'getTranslations'
    }),
  },
  i18n: new VueI18n({
    locale: language,
    messages: translations,
  }),
  // ...
}

在 store.js 中，setLanguage 和 setTranslations 的更新工作正常，但初始化时的 i18n 参数不是响应式的。在 newVueI18n 中使用固定值定义时，翻译工作正常。 我确信错误在我这边，但没有找到任何不同的实现方法。可以请任何人澄清并提出正确的方法吗？ （如果可能的话，我想保持现在的编码实现）

对不起，如果我夸大了，但在实现 i18n 组件时，我想知道如何从组件 (Index.vue) 访问主 Vue 实例，以及如何在 i18n 模块上为它的构造函数参数触发 setter？谢谢！

Answer 1

我能够使用 vuex-i18n 实现翻译功能（就像一个魅力）。