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");

至此。结束