Vue3 进阶篇-如何使用插件并制作一个简单的翻译功能

迈过了基础篇后，终于到了进阶篇了.本文主要是对官网的插件一些补充和代码的充实.单独看官网的介绍很难深入了解插件的使用. 本篇不会过多讨论依赖注入.但是代码会体现

首先简单说下vue的插件.vue的插件功能很强大，可以是封装好的HOC也可以是自定义组件，自定义命令,自定义函数.

基本代码结构

// my-plugin.ts

const MyPlugin = {
  install(app, options) {
    // do some config
  }
}

export default MyPlugin

然后在我们的入门文件使用链式的写法拼接到我们的主入口文件(组件)

import App from './App.vue'
import MyPlugin from './plugins/my-plugin.ts'

createApp(App).use(MyPlugin).mount('#app')

这样就完成了一个简单的插件，是不是很简单呢.

制作插件组件

 上面的代码仅仅是个空壳.没有实际意义.所以我们添加点东西，首先来实现一个插件组件.修改my-plugin.ts文件

// my-plugin.ts
import {App, h} from 'vue'
const MyPlugin = {
  install(app：App, options={}) {
     app.component('MyGlobalComponent', {
         setup(props:any, ctx:any) {
             return ()=> h('div', 'Evan, This plugin is used for component as well. ') 
         },
      },
    );
  }
}

export default MyPlugin

TS环境下在install里设置app的类型为vue.app , options，暂时我们先不用给个空的函数.

简单说下options.可以是一个函数体，ref，或者一个对象数据.一般常用配合provide注入使用.

创建一个自定义组件名称为: MyGlobalComponent

配置组件设置输出dom.这里使用的jsx的写法，至于原因可以看下我前面的文章Vue3: 单文件(SFC)输出多组件解决方案.

这个组件也是可以穿入props，emit绑定事件，做一些逻辑输出的，这里只是简单的输出下我的名字+一句话 （Evan). 

之前我们在main.vue中已经注册了这个插件，所以不需要我们在额外修改.接下来看下如何使用.

  <template>
    <MyGlobalComponent />
   </template>

很简单是吧，直接在我们的页面或者其他组件内的模版中加上我们的插件组件就可以了，而且是全局的不需要我们再用import来导入.运行结果

前面提到我们可以用prop，emit 当然你也可以当slot.能使用的地方很多.

自定义命令

接下里说下自定义的插件.主要使用的就是自定义的函数app.directive.

继续修改下我们的插件

// my-plugin.ts
import {App, h} from 'vue'
const MyPlugin = {
  install(app：App, options={}) {
     app.component('MyGlobalComponent', {
         setup(props:any, ctx:any) {
             return ()=> h('div', 'Evan, This plugin is used for component as well. ') 
         },
      },
// custom command
     app.directive('my-directive', {
         mounted(el, binding) {
         el.style.color = binding.value
      }});

    );
  }
}

export default MyPlugin

首先声明一个命令的名称:my-directive ,然后在生命周期 mounted中设置我们要进行的逻辑，这里例子是简单的更改文字颜色.当然我们还可以添加update勾子，监听一些状态述职的变化.

使用方法也是在我们的模版中直接添加

<p v-my-directive="'blue'">This text should be blue.</p>

这里使用方法跟directive一样，注意命名的规范

额外在添加一下

<p v-my-directive="'red'">this text is red and setting by the custom directive.</p>

 结果如下

自定义函数

就我个人来说，使用vue的插件，可能大部分的插件都是函数插件做一些工具插件来使用.

// my-plugin.ts
        app.config.globalProperties.$myMethod = (msg:string) => {
            console.log(msg)
        }

还是在我们的plugin中添加上面的代码
这里我们使用的globalProperties绑定一个我们自定义的函数，以用来使我们的函数可以在全局模版中使用. 这个函数就是简单的打印我们的定义的字符串.

   封装函数

这里是干货了。如果使用使用这个函数呢。在模版中我们需要创建一个全局的这个插件的实例，然后使用触发这个实例

<script setup>
import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const useGlobalMethod = () => {
  instance.appContext.config.globalProperties.$myMethod('Hello Evan this is plugin');
};
</script>

<template>
    <button @click="useGlobalMethod">Click me</button>
  </div>
</template>

当我们点击页面的这个button时候控制它输出

问题来了，每次我们使用插件都需要写一个创建实例的函数来使用吗？当然不是！

我们要把这个创建实例也封装到我们的插件中去.回到我们的my-plugin中
添加一个封装函数
 

export function useGlobalProperties () {
    const instance = getCurrentInstance();
    if (!instance) {
        throw new Error(`no instance found`)
    }

    return instance.appContext.config.globalProperties;
}

抽象后添加一个instance的验证，不要忘记export.

然后回到我们的组件页面中引用我们的这个封装好的函数

import {useGlobalProperties} from '../plugins/my-plugin'

<script setup>
  const {$myMethod, $translate} = useGlobalProperties()
  const useGlobalMethod = () => {
      $myMethod("Hello Evan this is plugin")
  }
</script>

<template>
   <button @click="useGlobalMethod">Click me</button>
</template>

这样每次我们使用过的时候只要使用我们自定义的$myMethod就可以了

多语言翻译函数

有了上面的知识储备，接下来检验下，做一个简单的多语言显示的tools

首先准备翻译的数据源文件
 

//language.ts
const en_lan:{[key:string]: string} = {
    "你好" : "Hello",
    "早上好": "Good morning",
    "测试": "test",

}

const cn_lan :{[key:string]: string}= {
    "hello" : "你好",
    "Good morning":"早上好",
    "test": "测试"
}

const hard_code :{[key:string]: string}= {
    "SYCO_TEST" : `this is test for hard code`,
    "SYCO_SUCCESS" : `this is test for success for submit`
}


export  {
    en_lan,
    cn_lan,
    hard_code
}

注意下TS的索引类型的写法

编写翻译的插件。这里结合我上面提到的插件文件一起看
 

    app.config.globalProperties.$translate = (type: string, text:any) => {
            return type == 'en'? en_lan[text]:cn_lan[text]
        }

函数接受2个参数一个是语言种类, 一个是要翻译的语言。

接下里添加点逻辑。每次点击按钮后切换显示的语言
 

<script setup>
 let t = ref<string>($translate("en", "你好"))
  let defaultType = false
  const handleTranslate = () => {
    t.value = $translate(defaultType?"en":"cn", t.value.toLocaleLowerCase())
    defaultType =!defaultType
  }
</script>

<template>
   {{ t }}
<button @click="handleTranslate">Translate word</button>
</template>

运行下默认显示

点击按钮后

可以来回切换，有了这个可以做的就很多了，例如主题，计算格式化，货币啊等等.