如何实时监听vuex里的数据变化,并更新消息提示红点

最新推荐文章于 2024-05-08 14:55:40 发布
最新推荐文章于 2024-05-08 14:55:40 发布
阅读量3.8k 收藏 7
点赞数 1
分类专栏： 笔记 文章标签： vue vue.js css3 es6 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47596965/article/details/118438455
版权

想实现一个功能，当我们对页面提交操作时，我们的消息图标的右上角会出现一个提示红点。
在这里插入图片描述
在这里插入图片描述

一开始想到的是用mounted和updated对红点提示进行更新，但是可以发现并不能实时更新，因为mounted和updated是只有当我们触发了提示消息的组件时才会更新

接下来我们可以用到computed和watch对vuex里的数据变化监听
我们已经在state中定义了一个存放消息的数组

 state: {
   
 //存放我的消息数据
  UserMesssage:[]
  }

返回我们有提示红点的组件页面，

提示红点的组件页面和如何在UserMessage中添加消息，在这里就不写页面样式和方法了，直接说如何监听


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  漆泽漆
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    7
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vuex提交state&&实时监听state数据的改变方法

				
			

			

				

					10-18
				

			

		

		

			
				
今天小编就为大家分享一篇vuex提交state&&实时监听state数据的改变方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	



                

              
                



	

		

			

				
					
实现vuex与组件data之间的数据同步更新方式

				
			

			

				

					10-16
				

			

		

		

			
				
默认情况下，当`state`中的数据变化，直接在组件模板中通过`$store.state`访问的数据会自动更新，但若将`state`的数据赋值给`data`，则不会自动同步。这是因为在Vue生命周期中，组件的`data`在初始化时仅获取了一次`...

			
		

	



                


  
              

                


	

		

			

				
					
vue页面中如何监听vuex中的数据变化

				
			

			

				

					coldriversnow的专栏
				

				

					07-24
					
					4304
					
				

			

		

		

			
				
https://blog.csdn.net/weixin_44900104/article/details/126060355

			
		

	





	

		

			

				
					
Vuex，在 Vue 组件中监听 Vuex 状态变化，使用watch监听Vuex中的数据

					
最新发布

				
			

			

				

					weixin_65793170的博客
				

				

					05-08
					
					1685
					
				

			

		

		

			
				
在 Vue 组件中监听 Vuex 状态变化。

			
		

	



		

			
		



	

		

			

				
					
监听vuex数据变化

				
			

			

				

					TO_Web的博客
				

				

					05-23
					
					2542
					
				

			

		

		

			
				
监听vuex数据变化

			
		

	





	

		

			

				
					
如何在组件中监听vuex数据变化(当vuex中state变化时，子组件需要进行更新，怎么做？)

				
			

			

				

					coldriversnow的专栏
				

				

					07-26
					
					473
					
				

			

		

		

			
				
第一种：通过改变router-view中的key来达到刷新组件的目的（野路子，推荐第三种）当改变state中的值时，改变router-view中的key,这个key为时间戳。切换主页面中的组织（即：改变组织id  orgid),需要刷新组件中的列表。当vuex中state变化时，子组件需要进行更新，怎么做？第二种：用watch(两种方法不可共存，用第一种时，watch失效)在子组件中，用watch监听。

			
		

	





	

		

			

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

				
			

			

				

					weixin_39255905的博客
				

				

					06-23
					
					2031
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Vuejs监听vuex中值的变化的方法示例

				
			

			

				

					10-17
				

			

		

		

			
				
主要介绍了Vuejs监听vuex中值的变化的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
Vuex实现数据存取教程（跨组件监听vuex数据变化）

				
			

			

				

					Flowering_Vivian的博客
				

				

					10-16
					
					1645
					
				

			

		

		

			
				
Vuex实现数据存取demo



			
		

	





	

		

			

				
					
vuex state中的数组变化监听实例

				
			

			

				

					12-13
				

			

		

		

			
				
前言
首先，因为我有一个需求就是vue组件中有一组多选框，选中多选框的内容，要在另一个组件中进行视图更新，这个就设计的兄弟组件之间的通信了，兄弟组件之前通信我首先选用的vuex这个解决办法。
问题
vuex的state用来放数据，我就把数组放在了vuex中,然后设置了修改的函数。最终store.js中的代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
 messArray:[]
}
const mutations = {
 modifyArray(state, obj){
 st

			
		

	





	

		

			

				
					
未读消息效果

				
			

			

				

					10-29
				

			

		

		

			
				
仿照QQ未读消息的效果，展示在手机屏幕图标上，很好的demo，可以用

			
		

	





	

		

			

				
					
监听vuex值变化实时改变

				
			

			

				

					qcg14774125的博客
				

				

					03-14
					
					6081
					
				

			

		

		

			
				
问题如图：

头部是一个组件，想在这个页面修改用户名点击确认修改后，头部名称跟到变化。

思路：用户名在登录成功过后，存在vuex里面并且保存在本地（防止刷新消失）


this.$store.commit('set_userName',res.data.data.username)

vuex中state.js：


userName:localStorage.getItem('userNa...

			
		

	





	

		

			

				
					
Vue组件间数据同步刷新解决方案--全局事件总线

				
			

			

				

					Ajucy的博客
				

				

					04-17
					
					3590
					
				

			

		

		

			
				
vue，跨组件间数据同步问题解决方案

			
		

	





	

		

			

				
					
Vue 监听Vuex 的数据变化

				
			

			

				

					weixin_53561783的博客
				

				

					05-09
					
					1363
					
				

			

		

		

			
				
watch: {
    '$store.state.viedoUrl': {
      deep: true, //深度监听
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue, '视频组件赋值')
        this.playerOptions.sources[0].src = newValue
      },
    },
  },




			
		

	





	

		

			

				
					
Vue自定义slot写消息提示小红点

					
热门推荐

				
			

			

				

					cysear的专栏
				

				

					08-07
					
					1万+
					
				

			

		

		

			
				
先上效果图： 
我是用的elementUI结合作用域插槽， 
先写slot，直接用的模板定义<script type="text/x-template" id="tipnotes">
    <span>
        <slot :text="redval"></slot>
    </span>
</script>注册组件：Vue.component('tipnotes',{

			
		

	





	

		

			

				
					
Vue实现未读消息小红点

				
			

			

				

					sisyphus0000的博客
				

				

					08-19
					
					5433
					
				

			

		

		

			
				
点击查询时调用接口


if (tab.label == "通知") {
        this.$request
          .get(this.$store.state.Url + "xxx", {
            id: this.obj.planId,
          })
       .then((res) => {
          res.map((item) => {
          this.xxx= item.xxx;
        });
 

			
		

	





	

		

			

				
					
addEventListener 监听vuex里的数据变化

				
			

			

				

					06-09
				

			

		

		

			
				
要监听 Vuex 中的数据变化，可以使用 Vuex 提供的 `watch` 方法，它可以监听 store 中的状态变化并触发回调函数。具体用法如下：  ```javascript import { mapState } from 'vuex'  export default {  computed: {  ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值