问题描述
我的问题有点特殊。我在这个项目中使用 Vuex 和 Nuxt。对于依赖项,我们使用 i18n-nuxt 但不知何故我不能在 $store 中使用 $t('some.translation') 而在组件中它工作得很好。我尝试了我能想象到的所有可能的组合,但结果仍然导致我犯同样的错误。
ReferenceError $t is not defined
要么
Cannot read the property of i18n
所以在这种情况下,我可以使用一些帮助来解决这个问题,或者如果有人向我展示如何使用 i18n 作为过滤器,那就太完美了。 (我认为这是唯一的方法。)
例如这个代码块来自 $store.state
sortMethods: [
{ id: 'airline',name: this.i18n.$t('Airline'),asc: 'A',desc: 'Z',defaultDirection: 'asc' },
你可以想象我无法在它们所在的地方翻译它们。
解决方法
i18n 模块默认不会注入到 store 上下文中,“this”关键字也无法访问该模块。
将翻译文件中的一个键作为值保存在商店中,甚至使用对象的id作为同一个翻译键,然后在组件中使用$t函数进行翻译,难道不是更好的方法吗?
喜欢下面的
store.js
const state = {
sortMethods: [
{
id: “airline”,key_name: “airline”
}
]
}
然后在你的 component.vue 的 select 标签中:
<option v-for=“method in $store.state.sortMethods” :key=“method.id”> {{$t(method.key_name)}}</option>
这将为您提供商店的翻译列表。无需直接翻译。
您可以使用 ID、键,甚至名称,始终确保 lang 文件中的翻译键是相同的。
,可以在带有 t
的更改和操作中使用 this.$i18n.t
。例如:
export const mutations = {
foo() {
console.log(this.$i18n.t("bar"));
}
}
但是我还没有找到在 state 或 getter 中使用它的方法,因为他们无法访问 this
。