#实现原理
通过本地存储结合vuex状态管理实现配置语言文件里面的一键切换语言
使用场景:
我们的项目需要适配中文,日文,英文三种语言 ,后端返回的数据是做了翻译机 但是写在前端的一些字段也需要做翻译 所以才有了这个功能
先附上我都项目文件目录 和效果图
1.第一步在utils下面创建语言配置文件languageSetting.js(对于项目中需要做翻译的字段都需要写出对应的语言)
//languageSetting.js这里写你的所有需要翻译的字段 同一个字段需要写三份分别放在翻个语言中
export const globalData = {
zh: {
test:'你好',
},
en: {
test:'hello',
},
jp: {
test:'こんにちは',
}
}
2.下载vuex(注意 我使用的是vue2对应的vuex 3.6.2版本 如果是vue3应该是4版本具体引入方法看vuex最新官网)
//store文件下的index.js文件
import Vue from 'vue';
import Vuex from 'vuex';
import languageStore from './modules/languageStore';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
languageStore
}
});
3.为了后续好维护vuex使用模块化创建modules 下面创建languageStore.js(分模块化 文件模块只维护对应的语言不与其他的有冗余)
//languageStore.js
import { globalData } from '@/utils/languageSetting';
const state={
// 语言设置默认从本地浏览器获取 获取不到则默认为中文
currentLanguage: localStorage.getItem('language') || 'zh',
globalData: globalData
}
const mutations= {
SET_LANGUAGE(state, language) {
state.currentLanguage = language;
}
}
const actions={
setLanguage({ commit }, language) {
commit('SET_LANGUAGE', language);
// 存储到浏览器
localStorage.setItem('language', language);
}
}
const getters= {
currentLanguage: state => state.currentLanguage,
globalData: state => state.globalData[state.currentLanguage]
}
export default {
namespaced: true,
state,
mutations,
actions,
getters
};
4.全局注册vuex
//main.js文件
import Vue from 'vue'
import App from './App.vue'
// 引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 引入路由
import router from './router'
// 引入vuex--在这其他的是项目其他引入
import store from './store'
Vue.config.productionTip = false
new Vue({
store,//全局挂载
router,
render: h => h(App),
}).$mount('#app')
5.最后就是页面使用
<template>
<div>
<el-select v-model="value" placeholder="请选择" @change="changeLanguage(value)">
<el-option label="中" value="zh"></el-option>
<el-option label="English" value="en"></el-option>
<el-option label="日本語" value="jp"></el-option>
</el-select>
{{ globalData.test }}
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
name: 'IndexPage',
data() {
return {
value: localStorage.getItem('language') || 'zh',
}
},
computed: {
//这里引入globalData页面只需要通过globalData.的方式使用对应的字段就好了 当语言发生切换的时候 这里访问的也会自动换成对应的语言
...mapGetters('languageStore',['globalData'])
},
methods: {
//这里只有在切换页面需要引入切换语言的方法 其他的的页面只引入上面的globalData就好了
...mapActions('languageStore',['setLanguage']),
changeLanguage(value) {
this.setLanguage(value);
}
}
}
</script>
最后祝您用餐愉快