vue3使用vue-i18n国际化_vue 国际化

最近公司项目开发完了, 准备把公司脚手架升级成vue3.x版本的.看了一下公司需要用到的类库.由于不知道对vue3.x支持如何, 所以建了vue3.x的demo.由于跟2.x版本配置不一样, 所以记录一下.

新建好了脚手架之后 先安装一下vue-i18n@next库(要安装@next版本, 这个版本才是针对vue3.x的).

在main.js文件内从'vue-i18n'引入createI18n并做一些简单的配置

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

const i18n = createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages
})

const app = createApp(App)
app
  .use(i18n)
  .use(store)
  .mount('#app')

3.x版本改成了createApp 所以直接app.use(i18n) 组件内写法还是没变, 跟以前一样

<div class="hello">
    <h1>{{ $t('message.hello') }}</h1>
 </div>

唯一变得是 原来都是通过扩展vue.prototype读取i18n的, 现在setup函数内部是没有this的. 所以读取方式得变一下. vue3.x有一个globalProperties.类似于之前直接在vue.prototype上做扩展一样 我们把i18n放到这个上面

app.config.globalProperties.i18n = i18n

然后对应的组件内部从vue引入computed,getCurrentInstance,watch

import { computed, getCurrentInstance, watch } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    const { ctx } = getCurrentInstance()

    const store = useStore()
    const language = computed(() => store.state.language)
    const handleChange = () => {
      store.commit('set_language', language.value !== 'en' ? 'en' : 'ja')
    }

    watch(language, (newVal) => {
      ctx.i18n.global.locale = newVal
    })

    return {
      handleChange
    }
  }
}

getCurrentInstance函数只能在setup函数内部使用, 可以让我们访问内部组件实例, 从这个里面解构出ctx, 在globalProperties挂载的那个i18n就在这个里面. 从store里面取出定义好的language, 用computed包装一下, 注意这里要用.value形式获取language, 不用的话会报下面这个错

在watch监听函数里面监听language把新值赋值给ctx.i18n.global.locale

最后写个事件监听函数return出去.在html代码里面写上监听函数

<button @click="handleChange">切换</button>

在真实项目当中开发的话建议写在mutation里面 新建i18n文件夹, 再新建一个index.js文件, 把main.js文件里的i18n的代码拷过来

import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}
const i18n = createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages
})

export default i18n

然后在main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import i18n from './i18n'

const app = createApp(App)

app
  .use(i18n)
  .use(store)
  .mount('#app')

在store文件夹下的index.js里面对应的mutation里面修改语言

import { createStore,createLogger } from 'vuex'
import i18n from '../i18n'

export default createStore({
  state: {
    language: ''
  },
  mutations: {
    ['set_language'](state, lang) {
      state.language = lang
      i18n.global.locale = lang
    }
  },
  actions: {},
  plugins: [createLogger()]
})

回过来再看代码会发现main.js文件清爽许多所有对应的业务逻辑处理都放到了对应的文件内, 这样对后期维护改动 只要到对应的文件内修改对应的业务就行 main.js始终只关心初始化这一系列操作