vue结合store实现双语切换功能

因为最近大众项目和新加坡的项目会涉及到国外用户,所以会用到双语切换功能,网上推荐使用vue-i18n,我抱着专研试一试的态度通过store实现双语切换功能,如果有更好的思路别忘了告诉本博主哦。

首先在自己项目的js目录下创建CN.config,js和EN,config,js语言对照表(也可以用JSON文件)


项目结构示意


EN.config.js
CN.config.js

在store用引入CN.config.js和EN.config.js,然后用sessionStorage保存一个状态,我将保存名命名为“lang_status”,因为才登录平台该字段为空,所以我就在state对象中用displayedLanguage变量通过判断lang_status是否等于2,不等于就默认接受英语的JS文件对象

再在store下定义一个切换语言的方法switch_language,如果displayedLanguage中对象的ID为1说明是英语,那么就让displayedLanguage=CN,并且保存状态 sessionStorage.setItem('lang_status',2),同理一样;

再在js文件下新建一个getLanguage.js 用于获取store中的displayedLanguage中的对象

getLanguage.js

挂载到main.js中

这时候只需要在你需要的页面调用全局$getLanguage方法,一定要放到created中哦



切换语言方法

页面监听state中的displayedLanguage变量,并更新页面


好了,功能实现

记得按照自己项目结构进行排列对象

示例
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容