526互联

vue2+element-ui国际化实战不刷新页面

发布时间 2023-06-28 23:52:04作者: ^Mao^

背景

有的时候我们做的项目需要支持中英文切换，那么我们就需要使用到vue-i18n插件

步骤

安装以及挂载

  1. 安装vue-i18n依赖
npm i vue-i18n@8
  1. 在src同级的目录下创建language文件下，在language文件夹下新增3个文件(index.js，en.js，zh.js)

index.js

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

// 引入自己应用需要支持语言配置文件
import zh from "./zh.js";
import en from "./en";

// 引入element的语言包
import ElementLocale from "element-ui/lib/locale";
import enLocale from "element-ui/lib/locale/lang/en";
import cnLocale from "element-ui/lib/locale/lang/zh-CN";

const i18n = new VueI18n({
  // 设置默认语言
  locale: window.localStorage.getItem("lang") || "cn",
  messages: {
    zh: {
      ...cnLocale,
      ...zh,
    },
    en: {
      ...enLocale,
      ...en,
    },
  },
});

ElementLocale.i18n((key, value) => i18n.t(key, value));
export default i18n;

en.js

const en = {
  // 引入自己定义的模块
};
export default en;

zh.js

const zh = {
  // 引入自己定义的模块
};
export default zh;
  1. 挂载到vue实例上
// main.js
import i18n from "./language";

new Vue({
  render: (h) => h(App),
  i18n,
}).$mount("#app");

创建语言文件

根据不同的模块在language/module下新增对应的语言文件，例如：下面针对首页以及用户页面新增home.js和user.js

中英文都定义在一个文件上容易维护

home.js

const home = {
  // 定义中文
  zh: {
    home: "首页",
  },
  // 定义英文
  en: {
    home: "Home",
  },
};

export default home;

user.js

const user = {
  zh: {
    user_mgr: "用户管理",
  },
  en: {
    user_mgr: "User Managerment",
  },
};

export default user;

在vue中的使用

  1. 在template中的使用
  <h1>{{ $t("user.user_mgr") }}</h1>
  1. 在script标签中的使用
export default {
  data() {
    return {
      msg: this.$t("home.home"),
    };
  },
  created() {
    console.log(this.msg);
  },
};

功能1：切换中英文

<template>
  <div class="app">
    <button @click="changeLanuage">
      切换成{{ lang == "zh" ? "EN" : "中文" }}
    </button>
    <h1>{{ $t("user.user_mgr") }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: this.$t("home.home"),
    };
  },
  created() {
    console.log(this.msg);
  },
  computed: {
    lang() {
      return this.$i18n.locale;
    },
  },
  methods: {
    changeLanuage() {
      let setLang = "";
      if (this.lang == "zh") {
        setLang = "en";
      } else {
        setLang = "zh";
      }
      // 本地去记录选择的语言
      window.localStorage.setItem("lang", setLang);
      // 更新i18n中的语言
      this.$i18n.locale = setLang;
    },
  },
};
</script>
<style scoped></style>

不刷新页面切换中英文

  1. 在data中定义的变量直接从i18n中读取，但是没有在模板上使用，在切换中英文的时候变量的值没变
    解决办法：将data中声明的变量，换成在computed中声明。缺点：如果要更新这个变量的话，就需要设置set的方法，麻烦!!
  2. 还是在data中定义变量，vue2的话使用全局事件总线,在组件的created监听语言切换事件，监听后重新对变量赋值。切换时发射变更语言的事件
    需要在组件中频繁写监听相关代码，麻烦。
  3. 在切换语言时将语言(lang)保存到vuex中，然后组件中通过watch监听vuex中的lang，然后调用一个方法来更新组件中无法切换成对应语言的变量
    App.vue
<template>
  <div class="app">
    <button @click="changeLanuage">
      切换成{{ lang == "zh" ? "EN" : "中文" }}
    </button>
    <button @click="getVal">获取value值</button>
    <h1>{{ $t("user.user_mgr") }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: this.$t("home.home"),
      value: this.$t("user.user_mgr"),
    };
  },
  created() {
    // 方式2
    // this.$bus.$on("changeLanguage", () => {
    //   this.updateData();
    // });
  },
  computed: {
    lang() {
      return this.$i18n.locale;
    },
    // 方式1
    // value() {
    //   return this.$t("user.user_mgr");
    // },
  },
  methods: {
    changeLanuage() {
      let setLang = "";
      if (this.lang == "zh") {
        setLang = "en";
      } else {
        setLang = "zh";
      }
      // 本地去记录选择的语言
      window.localStorage.setItem("lang", setLang);
      // 更新i18n中的语言
      this.$i18n.locale = setLang;
      // this.$bus.$emit("changeLanguage");

      this.$store.commit("changeLang", setLang);
    },
    getVal() {
      console.log(this.value);
    },
    updateData() {
      this.value = this.$t("user.user_mgr");
    },
  },
  watch: {
    // 方式3
    "$store.state.lang"() {
      this.updateData();
    },
  },
};
</script>
<style scoped></style>

store/index.js

import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);

const store = new Vuex.Store({
  state() {
    return {
      lang: "zh",
    };
  },
  mutations: {
    changeLang(state, playload) {
      state.lang = playload;
    },
  },
});

export default store;