Vue中使用watch监听Vuex中的数据变化

 使用computed和watch监听vuex数据变化

1.conputed从Vuex中获取需要监听的对象,赋值给Obj;

2.watch监听Obj的变化;

代码如下:

export default{
	component:{},
	data(){
		return{}
	},
	computed:{
		Obj(){
			return this.$store.state.data.age
		}
	},
	watch:{
		Obj(newVal,oldVal){
			//可以对数据执行相应的操作
			console.log(newVal,oldVal)
		}
	},
	methods:{},
}

 直接对Vuex对象进行watch监听

export default{
	component:{},
	data(){
		return{}
	},
	watch:{
		'$store.state.data.age'(newVal,oldVal){
			//对数据执行操作
			console.log(newVal,oldVal)
		}
	},
	methods:{}
}

相关推荐

  1. Vue使用watch监听Vuex数据变化

    2024-05-01 00:54:06       11 阅读
  2. Vuewatch一次监听两个值变化

    2024-05-01 00:54:06       34 阅读
  3. vuewatch监听路由传来参数变化问题

    2024-05-01 00:54:06       12 阅读
  4. Vue 监控变化watch

    2024-05-01 00:54:06       10 阅读
  5. Vue2之父子组件传值使用watch监听props对象

    2024-05-01 00:54:06       7 阅读
  6. Vue3watch函数使用

    2024-05-01 00:54:06       35 阅读
  7. vue watch监听多种使用

    2024-05-01 00:54:06       16 阅读
  8. vue3watch

    2024-05-01 00:54:06       32 阅读
  9. vue3:warch监听几种写法

    2024-05-01 00:54:06       36 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-05-01 00:54:06       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-01 00:54:06       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-01 00:54:06       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-01 00:54:06       18 阅读

热门阅读

  1. 等保测评-锐捷设备核查命令

    2024-05-01 00:54:06       31 阅读
  2. Tomcat基本使用与控制台乱码解决方式

    2024-05-01 00:54:06       8 阅读
  3. DN-DETR的原理和源码解读

    2024-05-01 00:54:06       10 阅读
  4. Golang中的Json标签(持续更新...)

    2024-05-01 00:54:06       9 阅读
  5. 重要数据的识别因素

    2024-05-01 00:54:06       10 阅读
  6. 人工智能入门:你需要掌握哪些基础知识?

    2024-05-01 00:54:06       8 阅读
  7. 【设计模式】14、strategy 策略模式

    2024-05-01 00:54:06       9 阅读
  8. 你用过最好用的AI工具有哪些?【模板】

    2024-05-01 00:54:06       8 阅读
  9. 如何在React中实现状态钩子

    2024-05-01 00:54:06       12 阅读