• 首先已经安装了以下的依赖或插件
  • vuex
  • i18n

调整store配置

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    language: localStorage.getItem('language') || 'en', // 默认语言从 localStorage 获取
  },
  mutations: {
    setLanguage(state, lang) {
      state.language = lang;
      localStorage.setItem('language', lang); // 保存到 localStorage
    },
  },
  actions: {
    changeLanguage({ commit }, lang) {
      commit('setLanguage', lang);
    },
  },
});

调整i18n配置

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import store from './store'; // 引入 Vuex store
import en from './locales/en.json';
import zh from './locales/zh.json';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: store.state.scene.language, // 使用 Vuex 中 scene 模块的语言
  messages: {
    en,
    zh,
  },
});

// 监听 Vuex 中 scene.language 变化，动态切换语言
store.subscribe((mutation, state) => {
  if (mutation.type === 'scene/setLanguage') {
    i18n.locale = state.scene.language; // 切换 vue-i18n 语言
  }
});

export default i18n;

修改语言的组件:

javascript
复制代码
<template>
  <div>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage(lang) {
      // 调用 Vuex action 来更改语言
      this.$store.dispatch('scene/changeLanguage', lang);
    },
  },
};
</script>

补充

在路由中也可通过携带参数的方式来调整

router.beforeEach((to, from, next) => {
  // 动态处理语言展示
  if (to.query && to.query.lan) {
    const lan = String(to.query.lan);
    if (i18n.messages.hasOwnProperty(lan)) {
      store.dispatch('changeLanguage', lan).then(r => {});
    }
  }
 next()
}