解决pinia中的i18n切换语言不生效的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决pinia中的i18n切换语言不生效的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在我的项目中，使用i18n切换语言后，会进行router.push来刷新页面。

但我发现写在store中的选项（我把它们用作下拉框组件的options，例如options="store.statusOption"），却并没有切换语言。它们需要我手动刷新页面后才能够切换语言。然而其它组件中的语言切换都很正常。

//修改之前
export const selectStore = defineStore('selectOption', {
  state: () => {
    return {
      ...
        statusOption: [
        {
          label: `${i18n.global.t('start')}`,
          value: 'ENABLE',
        },
        {
          label: `${i18n.global.t('stop')}`,
          value: 'DISABLE',
        },
      ],
    };
  },

个人理解：当翻译函数直接写在state中时，它们会在state初始化时执行，并将翻译的结果保存在状态数据中。这意味着在数据初始化之后，无论后续如何切换语言（即便进行了router.push)，状态数据中的翻译结果不会自动更新。然而使用getters，就类似于computed属性，在访问时动态地执行。访问label时，执行了翻译函数，所以能够获取到切换语言后的值。

所以，如果写在state中，只有在刷新页面时，state重新初始化，才能让state中的翻译函数根据当前的locale正确执行。

//修改之后
export const selectStore = defineStore('selectOption', {
  state: () => {
    return {
      ...
    };
  },
   getters: {
    statusOption(){
      return [
        {
          label: `${i18n.global.t('start')}`,
          value: 'ENABLE',
        },
        {
          label: `${i18n.global.t('stop')}`,
          value: 'DISABLE',
        },
      ];
    },
  }

虽然解决方法很简单，却花了我不少时间捏。文章来源地址https://www.toymoban.com/news/detail-647116.html

到了这里，关于解决pinia中的i18n切换语言不生效的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！