基於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裏替換一下就行啦