- 定义
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());
定义好了以后便随处可用，且为响应式
- 改变“state”，以某个vue spa单文件示例：
<script setup>
import { useState } from "@/utils/store";
const state = useState();
const sendMsg = ()=>{
state.globalMsg = {
type: "error",
msg: "iwueioqwuoeuowq",
};
}
</script>
- 在全局监听“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>
感想：
- 比起vuex感觉轻了好多~~，很舒服
- naive-ui很漂亮，很现代。可能是太新了吧，很多地方还是有不足
