Vue3 реализует мониторинг изменений состояния в магазине.

Vue3 реализует мониторинг изменений состояния в магазине.

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

требует внимания:
不能直接监听对象的属性值，需要写成getter函数。

Резюме:
watchпервый параметр может представлять собой различные формы источников данных, это может быть ссылка (включая вычисляемые свойства), реагирующий объект, функция-получатель или массив из нескольких источников данных.
Невозможно напрямую отслеживать свойства реактивного объекта:

 const obj = reactive({
    
     count: 0 })

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

Здесь нужно написать функцию, которая возвращает геттер свойства объекта

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

Справочный документ: vue3-listener