基于vuex实现的中英切换功能

本来想用那个什么vue-i18n，但是发现自己做的做法也差不多，就自己做了。

首先当然是先npm install 一下vuex。

安装成功之后在src目录下新建一个store文件夹，文件夹里新建一个index.js。

index.js里引入vue和vuex。

import Vue from 'vue';
import Vuex from 'vuex';

如果已经安装过并且建了store的话上面的步骤可以省略。

然后我们声明一个用于存放语言对应的各种文字的对象，就叫languageObj吧。

let languageObj = {

    ch: {

        followWx: '关注微信',
        followWb: '关注微博',

    },

    en: {

        followWx: 'Wechat',
        followWb: 'Microblog',
    }

}

ch里是中文对应的文字，en里是英文。记得键名要对应上，要不然没法切换。

然后就是：如果设置过语言，我们会把语言类型变量languageType存在localstroage里，通过获取localstorage来设置语言。如果没有设置过，可以获取浏览器的默认语言作为我们项目的默认语言。

同时判断语言类型，赋不同的值给要使用的语言对象。这里声明为language。

var languageType = localStorage.language;
var language = {}

if (languageType == '' || languageType == undefined) {
    var lang = navigator.systemLanguage ? navigator.systemLanguage : navigator.language; //获取浏览器配置语言 #括号内是个运算，运算过后赋值给lang，当?前的内容为true时把?后的值赋给lang，为False时把:后的值赋给lang
    var lang = lang.substr(0, 2);
    if (lang == 'zh') {
        language = languageObj.ch
        languageType = 'ch'
    } else {
        language = languageObj.en
        languageType = 'en'
    }
} else if (languageType == 'ch') {
    language = languageObj.ch
    languageType = 'ch'
} else {
    language = languageObj.en
    languageType = 'en'
}

然后声明切换语言的方法和state：

const state = {
    language: language,
    languageType: languageType
}
const mutations = {
    changeLanguage(state, type) {
        state.language = type == 'ch' ? languageObj.ch : languageObj.en;
        state.languageType = type;
        localStorage.language = type
    }
}

最后标准结局：导出一下

Vue.use(Vuex);
const store = new Vuex.Store({
    state,
    mutations
});

export default store;

再修改一下main.js:

接下来就是去页面里使用啦：

首先引入：

然后把template里要切换的地方替换一下：

在需要切换语言的地方调取changeLanguage方法并传值：

ok！大功告成！接下来就可以把所有的内容都换掉啦，只要在languageObj里增加对应的键值对，然后在template里替换一下就行啦