vue3 响应式API 替代vuex实现naive-ui mes

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单文件示例：

<script  setup>
import { useState } from "@/utils/store";
const state = useState();
const sendMsg = ()=>{
      state.globalMsg = {
        type: "error",
        msg: "iwueioqwuoeuowq",
      };
}
</script>

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

 <script setup>
import { useState } from "@/utils/store";
import { useMessage } from "naive-ui";
import { watch } from "vue";

const message = useMessage();
const state = useState();

watch(state, () => {
  switch (state.globalMsg.type) {
    case "info":
      message.info(state.globalMsg.msg);
      break;
    case "error":
      message.error(state.globalMsg.msg);
      break;
    case "warning":
      message.warning(state.globalMsg.msg);
      break;
    case "success":
      message.success(state.globalMsg.msg);
      break;
    case "loading":
      message.loading(state.globalMsg.msg);
      break;
    default:
      message.info(state.globalMsg.msg);
  }
});
</script> 

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

<script setup >
import { darkTheme } from "naive-ui";
import Message from "@/views/components/Message.vue";
</script>

<template>
  <n-config-provider :theme="darkTheme">

    <!-- 像这样载入子组件，全局消息才能起作用 -->
    <n-message-provider>
      <message />
    </n-message-provider>

    <router-view></router-view>
  </n-config-provider>

</template>

感想：

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