vue3实现监听store中state状态变化的简单方法
更新时间：2023年10月12日 08:54:05 作者：、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状态变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue项目fetch本地PAG格式文件404 NotFound的解决
这篇文章主要介绍了vue项目fetch本地PAG格式文件404 NotFound的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue.js的组件可以理解为预先定义好了行为的ViewModel类。这篇文章主要介绍了Vue.js组件使用开发实例教程的相关资料,需要的朋友可以参考下2016-11-11
reactive用来包装一个对象，使其每个对象属性都具有响应性（也就是深层次响应式），这篇文章主要介绍了vue3.2 reactive函数注意点及问题小结,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue3实现CSS无限无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了基于vue 实现token验证的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-12-12
本篇文章主要介绍了vue如何在自定义组件中使用v-model，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
在Electron环境下,截屏功能相对强大,可以通过desktopCapturer获取应用视频流,实现对整个应用的截屏,而在非Electron环境下,截屏功能受限,只能截取浏览器内容,且存在iframe或base64图片加载问题2024-10-10
文件上传在很多项目中都用的到，如果是几M的很快就传送完毕，如果是大文件呢？本文就介绍了Vue 大文件上传和断点续传的实现，感兴趣的可以了解一下2021-06-06
在vue2项目中，组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下（后台获取数据存入vuex，组件之间共享数据），那么就需要用vuex来管理这些。2017-05-05
这篇文章主要介绍了keep-alive不能缓存多层级路由菜单问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
最新评论