以Toast为例玩一玩Vue3

在 Vue2 时写过一个 toast 插件。详见 Vue | 如何封装一个toast插件。

翻看 Vue2 的 toast 代码可以发现核心是这句：

Vue.prototype.$toast = toast

Vue2 的时候会暴露一个 install 方法，并通过全局方法 Vue.use() 使用插件。

install 方法的第一个参数是 Vue 构造器，通过 new Vue() 实例化后，在组件中就能调用 this.$toast 使用组件了。

Vue3 的 install 方法不是传入 Vue 构造器，没有原型对象，Vue.prototype 是 undefined，上面的方式也就没啥用了。

---

Vue3 出来有段时间了，Vue3 的变化，广度上或者影响范围上个人认为应该是this，在 Vue2 中到处可见 this.$router，this.$store等代码。在 Vue3 中，不再推荐这种都往 prototype 中加的方式。

不妨看一看配套的 VueX 的写法：

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

这种方式的术语是Hook，具体可见 React 的文档。那么我们期望的 Toast 的使用方式为：

import { useToast } from "./useToast.js";
export default{
setup() {
      const Toast = useToast(); 
      Toast("Hello World");
};
}

那么问题来了，useToast.js 这个文件应该如何编写。

首先，明确一点我们先将 DOM 搞出来，一个居中的框，里面有提示文字。功能代码，一定时间消失，可以使用 setTimeout() 并设置默认事件2000毫秒。

在使用 Vue 时使用的是单文件方式template，这里不妨采用 h 函数来写，一下子高大上起来了呢。

 const toastVM = createApp({
  setup() {
    return () =>
      h(
        'div',
        {
          class: [
            'lx-toast',
          ],
          style: {
            display: state.show ? 'block' : 'none',
            background: "#000",
            color: "#fff",
            width: '100px',
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            padding: "8px 10px",
          }
        },
        state.text
      );
  }
});

核心代码是：display: state.show ? 'block' : 'none' 根据 state.show 的值来决定是否可以展示。

对于 state 的定义：

const state = reactive({
  show: false, // toast元素是否显示
  text: ''
});

接下来是将 h 好的东西挂到 DOM 中，

const toastWrapper = document.createElement('div');
toastWrapper.id = 'lx-toast';
document.body.appendChild(toastWrapper);
toastVM.mount('#lx-toast');

最后是核心的 useToast 函数：

export function useToast() {
  return function Toast(msg) {
    console.log(msg)
    // 拿到传来的数据
    state.show = true
    state.text = msg
    setTimeout(() => {
      state.show = false
    }, 1000);
  }
}

暴露函数可以控制展示文字数据，可能还需要控制展示时间等，更多的功能可以进一步扩展。