解决pinia中的i18n切换语言不生效的问题

  • 解决pinia中的i18n切换语言不生效的问题已关闭评论
  • 64 次浏览
  • A+
所属分类:Web前端
摘要

在我的项目中,使用i18n切换语言后,会进行router.push来刷新页面。但我发现写在store中的选项(我把它们用作下拉框组件的options,例如options=”store.statusOption”),却并没有切换语言。它们需要我手动刷新页面后才能够切换语言。然而其它组件中的语言切换都很正常。

在我的项目中,使用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',         },       ];     },   } 

虽然解决方法很简单,却花了我不少时间捏。