利用vuex配合i18n做国际化切换语言时部分数据不刷新问题
vue项目中点击类似按钮切换页面语言环境:运用的方法此处不做详细描述,思路是手动编写相关语言包,将lang配置到vuex中,切换语言是则是全部改变store中变量lang的值。使用时遇到问题:页面中以下区域的文字未能正常转换,需要刷新页面才会按需替换:发现:此tab的列表数据是配置在组件的data(){}中,eg:tablist:[{name: this.$t("common-myCourses"
·
vue项目中点击类似按钮切换页面语言环境:
运用的方法此处不做详细描述,思路是手动编写相关语言包,将lang配置到vuex中,切换语言是则是全部改变store中变量lang的值。
使用时遇到问题:页面中以下区域的文字未能正常转换,需要刷新页面才会按需替换:
发现:此tab的列表数据是配置在组件的data(){}中,
eg:
tablist:[
{
name: this.$t("common-myCourses"),
path: "/creativeCenter/MyCourse",
class: "subtitle-1 font-weight-light text-center"
},
{
name: this.$t("common-coursesAttended"),
path: "/creativeCenter/CoursesAttended",
class: "subtitle-1 font-weight-light text-center"
},
{
name: this.$t("common-myVideo"),
path: "/creativeCenter/MyVideo",
class: "subtitle-1 font-weight-light text-center"
}
]
需要将data中的$t语言数据编写在computed方法中能完美解决此tab数据未及时刷新的问题:
computed: {
tablist: function() {
return [
{
name: this.$t("common-myCourses"),
path: "/creativeCenter/MyCourse",
class: "subtitle-1 font-weight-light text-center"
},
{
name: this.$t("common-coursesAttended"),
path: "/creativeCenter/CoursesAttended",
class: "subtitle-1 font-weight-light text-center"
},
{
name: this.$t("common-myVideo"),
path: "/creativeCenter/MyVideo",
class: "subtitle-1 font-weight-light text-center"
}
];
}
},
well done !
更多推荐
已为社区贡献3条内容
所有评论(0)