vue3实现监听store中state状态变化的简单方法

2023-10-12 08:51:58 作者：、Diamond

这篇文章主要给大家介绍了关于vue3实现监听store中state状态变化的简单方法,store是一个状态管理工具,文中通过代码介绍的非常详细,需要的朋友可以参考下

import {  watch } from "vue";
watch(
  () => store.state.currentDevice,
  (newVal, oldVal) => {
    // to do
    reload();
  }
);

需要注意：不能直接监听对象的属性值，需要写成getter函数。

总结：

watch 的第一个参数可以是不同形式的数据源，它可以是一个ref（包括计算属性），一个响应式对象，一个getter函数，或多个数据源组成的数组。

不能直接监听响应式对象的属性：

 const obj = reactive({ count: 0 })
// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

这里需要写成返回对象属性的getter的函数

watch(
	()=>obj.count,
	(count)=>{
	// todo
	console.log(`count is: ${count}`)
	}	
)

参考文档：vue3-侦听器

到此这篇关于vue3实现监听store中state状态变化的文章就介绍到这了,更多相关vue3监听state状态变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！