网站开发者 敬请期待,长春做网站用的软件,培训机构连锁加盟,html底部的版权代码Vue3ElementPlusTS实现右上角消息数量实时更新
背景 项目需求#xff0c;前端右上角铃铛图标 显示接收到的消息通知#xff0c;并且显示消息数量以及实时更新。#xff08;一般是点击操作按钮后增加一条消息通知#xff0c;图标上的数字也随之更新#xff09; 【原来的想…Vue3ElementPlusTS实现右上角消息数量实时更新
背景 项目需求前端右上角铃铛图标 显示接收到的消息通知并且显示消息数量以及实时更新。一般是点击操作按钮后增加一条消息通知图标上的数字也随之更新 【原来的想法是使用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 effectdark content今日待办 placementbottomel-badge :valueshowMsgCount :max99 classitemel-popover placementbottom :width400 triggerclicktemplate #referenceel-icon color#777575 classno-inherit :size20 stylevertical-align: middleBell //el-icon/template/el-popover/el-badge/el-tooltipimport { computed } from vue;
import { useStore } from vuex;
const store useStore();
//使用computed可以是变量数值实时更新
const showMsgCount computed(() {return store.state.msgCount;
})步骤三
在点击产生消息按钮返回成功后调用下面的脚本,就可实时同步更新消息数量从而不刷新页面而更新消息数量。
store.dispatch(getMessage);至此。结束
