因为最近大众项目和新加坡的项目会涉及到国外用户,所以会用到双语切换功能,网上推荐使用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变量,并更新页面

好了,功能实现


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

示例