本來想用那個什麼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裏替換一下就行啦