使用vuex实时更新右上角通知信息的红点数量

需求如图：因为这两个不存在组件关系，所以我们使用Vuex来解决这个实时刷新

1.首先在vuex的state定义数据如下

state{noticeCount: 0,
}

2.更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数,在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数，你可以向 store.commit 传入额外的参数

//noticeCount额外的参数
SET_NOTICE_COUNT: (state, noticeCount) => {console.log("noticeCount", noticeCount);state.noticeCount = noticeCount;
},

3.因为我们的接口请求数据只能放在action异步请求这里，为何把接口数据放在vuex呢？因为你可能这个铃铛数量的改变是多个页面影响的。

actions: {getUnreadMessagesCount({ commit }) {inventoryNotice.getInventoryCount().then((res) => {commit("SET_NOTICE_COUNT", res.data.data); //异步获取到铃铛的数量， 触发mutations的方法 把值赋给noticeCount});},
},

4.接下来vuex的工作都准备好了，接下来在你需要操作的页面点击按钮事件那里调用action的方法

 this.$store.dispatch("getUnreadMessagesCount");//调用vuex里面的异步方法 请求获取到铃铛的数量

5.最后在铃铛页面使用监听属性（computed）拿到数据

import { mapState } from "vuex";computed：{...mapState({count: (state) => state.common.noticeCount, //直接拿到count数量})
}

至此利用vuex进行实时刷新的消息通知数量的功能已完成。有疑问的小伙伴可以多交流沟通

使用vuex实时更新右上角通知信息的红点数量相关推荐

Nacos 原理：推+拉打造客户端配置信息的实时更新
点击蓝色"程序猿DD"关注我哟来源:逅弈逐码上篇文章 <Nacos 配置中心原理>我和大家分析了 Nacos 的配置中心原理,主要分析了 Nacos 客户端是如何感 ...
用python实现简单的网站信息更新自动通知
用python实现简单的网站信息更新自动通知因为需要及时收到学校研究生网站的消息,每过一小段时间去网站看耗费精力,且不一定能及时的收到消息,所以萌生了用程序定时检测网站是否更新的想法.代码地址点这里 ...
epg信息服务器,EPG系统及EPG信息的实时更新方法
1.一种EPG系统,包括: 播出系统(1),所述播出系统(I)包括节目单编辑模块(11).播出在线控制模块(12)和节目单网关模块(13),所述节目单网关模块(13)根据节目单编辑模块(11)编辑的节 ...
招聘网站企业信息招聘公司实时更新监控提醒
本次任务的目的是监控各大招聘网站,实时获取发布招聘信息的企业. 首先我们打开<网站资讯监控工具>,添加招聘信息网址,并设置编码. 默认情况是监控所有链接,包括招聘信息和发布信息的企业.意思 ...
react前端面试题（实时更新）
React前端面试题 1. 对React-Fiber的理解,他解决了什么问题 2.对webSocket的理解 4.说说你对koa中洋葱模型的理解? 5.说说package.json中版本号的规则? 6 ...
RocketMQ：消息消费队列与索引文件的实时更新以及文件恢复源码解析
文章目录消息存储 1.实时更新消息消费队列和索引文件 1.1.转发到ConsumerQueue 1.2.转发到Index 2.消息队列和索引文件恢复 2.1.存储文件加载 2.1.1.加载commi ...
datagridview实时更新数据_旭诺云盒｜智能办公新趋势进出口数据自动提取，通关状态实时更新...
春节期间,很多公司同事都被滞留在老家无法返回公司上班,为了保证公司业务正常运转,同事之间依靠邮件.微信.QQ等工具进行文件和数据的传递,增加了很多数据整理时间.且电子口岸.单一窗口这些进出口企业频繁使 ...
ios pusher使用_如何使用JavaScript和Pusher实时更新用户状态
ios pusher使用 by Rahat Khanna 通过拉哈特·汉娜如何使用JavaScript和Pusher实时更新用户状态 (How to update a User's Status i ...
php 实时更新内容_亿级视频内容如何实时更新？优酷视频背后的技术揭秘
简介: 优酷视频内容数据天然呈现巨大的网络结构,各类数据实体连接形成了数十亿顶点和百亿条边的数据量,面对巨大的数据量,传统关系型数据库往往难以处理和管理,图数据结构更加贴合优酷的业务场景,图组织使用包 ...

使用vuex实时更新右上角通知信息的红点数量

使用vuex实时更新右上角通知信息的红点数量相关推荐

最新文章

热门文章