vue+vuex实现本地项目一键切换语言

#实现原理

通过本地存储结合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>

最后祝您用餐愉快