Vue插件

在vue3项目中可以安装@voerkai18n/vue来实现枚举语言、变量注入、语言切换等功能。

安装

将@voerkai18n/vue安装为运行时依赖

npm install @voerkai18n/vue
pnpm add @voerkai18n/vue
yarn add @voerkai18n/vue

启用插件

    import { createApp } from 'vue'
    import Root from './App.vue'
    import { i18nPlugin } from '@voerkai18n/vue'
    import { i18nScope } from './languages'
    const app = createApp(Root)
    app.use(i18nPlugin,{ i18nScope })   // 重点，需要引入i18nScope
    app.mount('#app')

插件安装成功后，在当前Vue App实例上provide一个i18n响应式实例。

注入i18n实例

接下来在组件中按需注入i18n实例，可以用来访问当前的激活语言、默认语言、切换语言等。

<script>
import {reactive } from 'vue'
export default {
  inject: ['i18n'],    // 注入i18n实例，该实例由@voerkai18n/vue插件提供
  ....
}
</script>

声明inject: ['i18n']后在当前组件实例中就可以访问this.i18n，该实例是一个经过reactive封闭的响应式对象，其内容是：

this.i18n = {
  	activeLanguage,					// 当前激活语言，可以通过直接赋值来切换语言
    defaultLanguage,				// 默认语言名称
    languages						// 支持的语言列表=[{name,title},...]
}

应用示例

注入i18n实例后就可以在此基础上实现激活语言、默认语言、切换语言等功能。

<script>
import {reactive } from 'vue'
export default {
  inject: ['i18n'],    // 注入i18n实例，该实例由@voerkai18n/vue插件提供
  ....
}
</script>  
<template>
	<div>当前语言:{{i18n.activeLanguage}}</div>
	<div>默认语言:{{i18n.defaultLanguage}}</div>	
	<div>
        <button 
            @click="i18n.activeLanguage=lng.name" 
            v-for="lng of i18n.langauges">
			{{ lng.title }}        
	    </button>
    </div>
</templage>

插件参数

@voerkai18n/vue插件支持以下参数：

import { i18nScope } from './languages'
app.use(i18nPlugin,{ 
    i18nScope,				//重点，需要引入当前作用域的i18nScope 
})