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

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

需要注意：
不能直接监听对象的属性值，需要写成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)=>{// todoconsole.log(`count is: ${count}`)}
)

参考文档：vue3-侦听器

vue3 实现监听store里state状态变化相关推荐

Android Studio 基础之获取蓝牙Bluetooth 的状态，设置的蓝牙Bluetooth 的开关状态，并监听蓝牙Bluetooth 的状态变化方法整理
Android Studio 基础之获取蓝牙Bluetooth 的状态,设置的蓝牙Bluetooth 的开关状态,并监听蓝牙Bluetooth 的状态变化方法整理目录 Android Studi ...
vue 监听对象里的特定数据
2019独角兽企业重金招聘Python工程师标准>>> vue 监听对象里的特定数据变化通常是这样写的,只能监听某一个特定数据 watch: {params: function( ...
watch监听对象里面值的变化_Vue总结——computed和watch的用法和区别
computed--计算属性写法一: 写法二: computed默认有缓存如果被依赖的属性没有发生变化,就不会重新计算. 什么是变化: 点击n+1按钮,控制台打出 n变了点击obj.a=hi , ...
vue 监听表格里的数据变化_vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
vue3 watch 监听多值以及深度监听用法
1.监听单个值引入: import {-, watch} from "vue"; import {useRouter} from 'vue-router'; export def ...
vue3 watch监听在组件初次加载的时候执行
设置参数immediate为true,组件初次加载就会触发一次监听 watch( () => props.name, (newValue, oldValue) => { console.l ...
vue 监听表格里的数据变化_vue中监听object数据变化的基本原理
# 简略版+自己的注释// 判断一个变量是否是对象 function isObject(obj) { return obj.constructor === Object } class Observe ...
vue3 watch监听数组内属性元素变化
watch(() => arr,(now, old) => {console.log('old',old);console.log('now',now);},{ deep: true } ...
vue监听store
这么妙的方法可以帮你解决很多跨越组建的传数据的问题,然而我现在才发现.. 拿了一个简单的username作为例子吗,无论在哪里变化就可以侦听到啦,跨越组件 watch:{ '$store.getter ...

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

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

vue3 实现监听store里state状态变化相关推荐

最新文章

热门文章