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实现自定义树形组件的示例代码
这篇文章主要介绍了vue实现自定义树形组件的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
vite+ts vite.config.ts使用path报错问题及解决
这篇文章主要介绍了vite+ts vite.config.ts使用path报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue-i18n结合Element-ui的配置方法
这篇文章主要介绍了vue-i18n结合Element-ui的配置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
vue动态绑定图标的完整步骤
动态绑定是我们日常开发中经常遇到的一个需求，下面这篇文章主要给大家介绍了关于vue动态绑定图标的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2021-05-05
详解Element-ui NavMenu子菜单使用递归生成时使用报错
这篇文章主要介绍了详解Element-ui NavMenu子菜单使用递归生成时使用报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
Vue实现简单基础的图片裁剪功能
这篇文章主要为大家详细介绍了如何利用Vue2实现简单基础的图片裁剪功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下
2022-09-09
解决Antd Table组件表头不对齐的问题
这篇文章主要介绍了解决Antd Table组件表头不对齐的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue+vux实现移动端文件上传样式
这篇文章主要介绍了vue+vux实现移动端文件上传样式,样式使用的是vux的cell组件，需要的朋友可以参考下
2017-07-07
vue3.0如何使用computed来获取vuex里数据
这篇文章主要介绍了vue3.0如何使用computed来获取vuex里数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue3安装dataV报错问题解决方案
这篇文章主要给大家介绍了关于Vue3安装dataV报错问题解决方案的相关资料,dataV用于大屏展示,个人觉得比echarts简单很多,需要的朋友可以参考下
2023-06-06