Vue3+ElementPlus+TS实现右上角消息数量实时更新

Vue3+ElementPlus+TS实现右上角消息数量实时更新

背景

项目需求，前端右上角铃铛图标 显示接收到的消息通知，并且显示消息数量以及实时更新。（一般是点击操作按钮后增加一条消息通知，图标上的数字也随之更新）
【原来的想法是使用location.reload();刷新页面，可以刷新消息数量，但是体验不好】

步骤一

index.ts

import { createStore } from "vuex";
const store = createStore({state() {return {msgCount: 0};},mutations: {SET_msgCount(state,msgCount) {state.msgCount = msgCount;}},actions: {/*getMessage()是调用后端获取消息的方法*function getMessage() {*    return axios.get("/user/getMessage")*}*/  getMessage({ commit }) {return new Promise((resolve, reject) => {getMessage().then((res) => {commit("SET_msgCount", res.length);resolve(res);}).catch((err) => reject(err));});}
});export default store;

步骤二

header.vue 前端页面 铃铛组件显示消息数量代码

<el-tooltip effect="dark" content="今日待办" placement="bottom"><el-badge :value="showMsgCount" :max="99" class="item"><el-popover placement="bottom" :width="400" trigger="click"><template #reference><el-icon color="#777575" class="no-inherit" :size="20" style="vertical-align: middle"><Bell /></el-icon></template></el-popover></el-badge></el-tooltip>

import { computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
//使用computed可以是变量数值实时更新
const showMsgCount = computed(() => {return store.state.msgCount;
})

步骤三

在点击产生消息按钮，返回成功后调用下面的脚本,就可实时同步更新消息数量，从而不刷新页面而更新消息数量。

store.dispatch("getMessage");

至此。结束