VUE_监听vuex数据的方法

骑猪看日落 2022-10-05 14:49 317阅读 0赞

# 监听单个数据 #

vuex数据

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
    	state: { 
    		memberType:0
    	},
    	mutations: { 
    	},
    	actions: { 
    	},
    	modules: { 
    	}
    })

页面处理

data() { 
    	return { 
    	}
    },
    computed:{ 
    	//计算vuex数据并返回
    	stateMemberType(){ 
    		return this.$store.state.memberType
    	}
    },
    watch:{ 
    	//监听vuex数据
    	stateMemberType(e){ 
    		console.log('数据发生了改变',e)
    	}
    },

# 深度监听数据 #

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
    	state: { 
    		data:{ 
    			name:"123",
    			age:10
    		}
    	},
    	mutations: { 
    	},
    	actions: { 
    	},
    	modules: { 
    	}
    })

页面处理

data() { 
    	return { 
    	}
    },
    computed:{ 
    	//计算vuex数据并返回
    	stateMemberType(){ 
    		return this.$store.state.data
    	}
    },
    watch:{ 
    	//监听vuex数据
    	stateMemberType: { 
    		immediate: true,
    		deep:true,
    		handler: function (newval) { 
    			console.log('数据发生了改变',newval)
    		},
    	}
    },

发表评论取消回复

表情：

评论列表（有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中watch监听数据

watch: { bianliang: { //如果是浅层次的就直接写上变量名不用，深层次的必须加上引号包起来"" // 数

浅浅的花香味﹌/ 2023年10月09日 14:07/ 0 赞/ 40 阅读

相关 vue中的共享数据管理---vuex

引言 vuex是关于对vue中一些多个组件共享的数据进行统一集中式管理的方法。在实际的前端开发中，为了减少重复代码的使用，通常我们会把重复使用的代码，封

柔情只为你懂/ 2022年12月30日 13:56/ 0 赞/ 301 阅读

相关 vuex：vuex取值undefined、vue监听器、以及监听失效（数据没有改变的问题）

一、vuex取值undefined 网上很多都是直接取值的：this.$store.state.全局变量名称但是具体问题具体分析嘛！看看vuex里面是怎么定义的

深碍√TFBOYSˉ_/ 2022年10月05日 14:53/ 0 赞/ 389 阅读

相关 VUE_修改vuex数据的方法，mapGetters获取数据

vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)

灰太狼/ 2022年10月05日 14:50/ 0 赞/ 230 阅读

相关 VUE_监听vuex数据的方法

监听单个数据 vuex数据 import Vue from 'vue' import Vuex from 'vuex' Vue.use

骑猪看日落/ 2022年10月05日 14:49/ 0 赞/ 318 阅读

相关 vuex state中的数组变化监听方法

前言首先，因为我有一个需求就是vue组件中有一组多选框，选中多选框的内容，要在另一个组件中进行视图更新，这个就设计的兄弟组件之间的通信了，兄弟组件之前通信我首先选用的v

爱被打了一巴掌/ 2022年04月04日 14:42/ 0 赞/ 375 阅读

相关 vue 中的vuex数据框架使用

vue 只能承担视图层的主要类容 vuex 数据框架大量数据 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

缺乏、安全感/ 2021年12月12日 14:05/ 0 赞/ 319 阅读

相关如何在组件中监听vuex数据变化

//利用计算属性 computed: { listData() { return this.$store.state.l

怼烎@/ 2021年09月19日 16:32/ 0 赞/ 538 阅读

相关 vue的vuex监听

vue如何在非vue文件中监听vuex数据的变更？通常我们在vue文件中监听数据的变更，尤其是vuex中数据的变更非常方便，通过watch函数可以很便捷的拿到数据变更前

叁歲伎倆/ 2021年08月19日 23:40/ 0 赞/ 444 阅读

相关监听vuex的某条数据

需要现在计算属性里获取 computed: { tabType: { get() { return

绝地灬酷狼/ 2021年07月24日 18:19/ 0 赞/ 339 阅读