vue3 响应式API 替代vuex实现naive-ui message 显示全局消息

1. 定义store.js

import { reactive, provide, inject } from "vue";

//定义一个响应式变量
export const createState = () =>
  reactive({
    globalMsg: { type: "info", msg: "asdasd" },
  });

//依赖注入
export const stateSymbol = Symbol("state");
export const useState = () => inject(stateSymbol);
export const provideState = () => provide(stateSymbol, createState());

定义好了以后便随处可用，且为响应式

2. 改变“state”，以某个vue spa单文件示例：

3. 在全局监听“state”变化：

这有个小坑，我是用的是naive-ui, 他这个全局消息感觉有点奇怪，上面这一段一定要写在一个子组件里，并且在APP根组件import这个子组件才能起作用。（使用Element+忽略）

感想：

1. 比起vuex感觉轻了好多~~，很舒服
2. naive-ui很漂亮，很现代。可能是太新了吧，很多地方还是有不足