vue3 实现监听store里state状态变化

vue3 实现监听store里state状态变化

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}`)
	}	
)

参考文档:

经验分享 程序员 微信小程序 职场和发展