Vue3+ElementPlus+TS實(shí)現(xiàn)右上角消息數(shù)量實(shí)時(shí)更新

背景

項(xiàng)目需求，前端右上角鈴鐺圖標(biāo) 顯示接收到的消息通知，并且顯示消息數(shù)量以及實(shí)時(shí)更新。（一般是點(diǎn)擊操作按鈕后增加一條消息通知，圖標(biāo)上的數(shù)字也隨之更新）
【原來的想法是使用location.reload();刷新頁面，可以刷新消息數(shù)量，但是體驗(yàn)不好】

步驟一

index.ts

import { createStore } from "vuex";
const store = createStore({state() {return {msgCount: 0};},mutations: {SET_msgCount(state,msgCount) {state.msgCount = msgCount;}},actions: {/*getMessage()是調(diào)用后端獲取消息的方法*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 前端頁面 鈴鐺組件顯示消息數(shù)量代碼

<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可以是變量數(shù)值實(shí)時(shí)更新
const showMsgCount = computed(() => {return store.state.msgCount;
})

步驟三

在點(diǎn)擊產(chǎn)生消息按鈕，返回成功后調(diào)用下面的腳本,就可實(shí)時(shí)同步更新消息數(shù)量，從而不刷新頁面而更新消息數(shù)量。

store.dispatch("getMessage");

至此。結(jié)束