vue3中如何使用vue-i18n

vue-i18n

下载vue3版本的vue-i18n
npm install vue-i18n@next -S
我当前使用版本 "vue-i18n": "^9.1.6"

1 vue3版本的vue-i8n用法还是有挺大区别的相对于之前的版本

// language文件夹下的index.js 
// zh, en, id 分别为三种语言文件
import { createI18n } from 'vue-i18n';
import zh from './zh';
import en from './en';
import id from './id';

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: localStorage.getItem('language') || 'id-ID',
  messages: {
    'zh-CN': zh,
    'en-US': en,
    'id-ID': id
  }
});

export default i18n;

2 在入口文件引入i18n

import i18n from './language/index';
App.use(i18n);

3 切换语言 以及使用

// 这是切换语言的方法， val为接收到的值，为一个对象 {text: '英文', value: 'en'}
// 因为vue3中setup写法不含有this, 所以在vue3中通过vue2的methods写法
setLangCondition: function (val) {
    // 通过this.$i18n.locale修改语言
    this.$i18n.locale = val.value;
    this.langType = val.value;
    localStorage.setItem('language', this.$i18n.locale);
    this.chooseShow = false;
    this.setTile();
},

// 当然有vue3的写法
import { useI18n } from 'vue-i18n';
setup() {
    const { locale } = useI18n()
    // 通过locale.value切换
    const setLangCondition = (val) =>{
        locale.value = val.value;
        localStorage.setItem('language', locale.value);
    }
    return {
        setLangCondition
    }
 },

// 在标签中使用 通过 $t() 或者 t()
<p class="title">{{ $t('new.activityName') }}</p>
<p class="title">{{ t('new.activityName') }}</p>

// 在js中使用类似
import i18n from '../../../language/index'
i18n.global.t('new.address0')