05编写全球化的插件

在上一章我们使用Pinia实现了全球化。但是在一个应用中不可能只有一个组件，我们需要在每个组件添加重复的计算属性代码，这样很麻烦。而Vue为我们提供了全局扩展属性，这样我们就可以在创建插件时定义扩展属性，在组件中就可以直接使用了。

新增插件文件Plugins/localizationPlugin.ts，添加以下代码完成插件的编写

import { App } from ‘vue’import { useApplicationConfigurationStore } from ‘@/stores/ApplicationConfiguration’const localizationPlugin = { install (app: App) { // 安装全局可用的属性 国际化方法 app.config.globalProperties.$l = (key: string) => { const store = useApplicationConfigurationStore() return store.l(key) } }}export default localizationPlugin// 在Vue中定义扩展全局属性export {} // 注意：没有这行代码将覆盖原始类型declare module ‘vue’ { export interface ComponentCustomProperties { /** * 国际化语言转换 * @param key 国际化配置的Key * @returns 国际化配置的译文 */ $l: (key: string) => string }}

在main.ts中安装插件

import localizationPlugin from ‘@/Plugins/localizationPlugin’ .use(localizationPlugin)

在AboutView.vue控件中就可以直接使用$l了，完整代码：

This is an about page {{ $l(‘LongWelcomeMessage’) }} import { IConfig } from ‘@/api-client/clientBase’import { defineComponent } from ‘vue’import { TestClient } from ‘../api-client/client’import LanguageSelectVue from ‘@/components/selects/LanguageSelect.vue’export default defineComponent({ components: { LanguageSelectVue }, data () { return { // } }, beforeMount () { // }, mounted () { // }, computed: { }, methods: { // }})