vue 使用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: {async getUnreadMessagesCount({ commit }) {const resp = await http.get({ url: globalApi.getUserMessageApi, params: {isRead: '0',pageNum: 1,pageSize: 10} });commit("SET_NOTICE_COUNT", resp.total);}
}

4.接下来vuex的工作都准备好了，接下来在你需要操作的页面，我是在mian.js 调用action的方法

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

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

    computed: {...mapState({count: (state) => state.noticeCount, //直接拿到count数量})},

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

vue 使用vuex实现消息通知提示相关推荐

uni-app开启消息通知
场景:uni-app开启移动app,如果用户没开启消息通知提示开启因为uni-app升级到androidx,之前的android.support.v4.app.NotificationManager ...
【VUE】浏览器消息通知（声音提醒，标题栏闪动，弹框提醒）
思路: 浏览器通知使用Notification,详情可查看Notification.Notification() 标题栏闪动利用循环实现声音提醒可以使用播放本地音频实现总结:在当前页面接收到消息时 ...
vue elementUI实现消息通知功能
登录成功后建立WebSocket链接,使用心跳机制保持连接状态后端根据用户权限选择关闭或保持连接状态收到消息时创建一个notify并以id作为key值保存到通知对象中 notify自动消失前点击详 ...
[经验教程]手机上微信新消息不提示也不显示微信消息通知怎么办？
微信来新消息手机上不提示也不显示新消息提醒通知,主要因为二个方便:一是微信设置新消息通知未启,另一个是手机微信应用未开通消息提醒通知.只要按下面的教程分别排查开启新消息通知即可恢复微信消息通知提醒正常 ...
Vue项目中实现消息提示/报警/未读消息（铃铛加小圆点闪烁效果）
在项目开发过程中,可能需要实现以下场景:未读消息提示.报警信息.消息通知等,这些功能往往是在页面的右上角设置一个铃铛,在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示下面分享一下这类效果的实现方法 ...
Uniapp 应用消息通知插件 Ba-Notify
应用消息通知插件 Ba-Notify 简介(下载地址) Ba-Notify 是一款功能全面的uniapp应用消息通知插件,可在状态栏显示各种样式的消息提醒. 包含普通通知.大图通知.多行通知.进度通知 ...
[UWP]实现一个轻量级的应用内消息通知控件
[UWP]实现一个轻量级的应用内消息通知控件原文:[UWP]实现一个轻量级的应用内消息通知控件在UWP应用开发中,我们常常有向用户发送一些提示性消息的需求.这种时候我们一般会选择MessageDi ...
vue+vue-router+vuex实战
shopping vue + vue-router + vuex实现电商网站效果展示 install 下载代码: git clone https://github.com/chenchangyuan ...
Android Service下载文件并自定义通知提示下载
最近要做一个更新sdk,里面用到了service后台下载,自定义通知提示下载进度,下面直接贴上代码. 下面是UpdateUtils.java ,告诉你如何使用 package com.cnziz.up ...

vue 使用vuex实现消息通知提示

vue 使用vuex实现消息通知提示相关推荐

最新文章

热门文章