vuex管理公共状态，遇上状态变化但组件里没有检测到

CrxzYia

于 2023-06-04 17:32:16 发布

阅读量267

点赞数

分类专栏：前端文章标签：前端 vue.js

版权

5 篇文章

订阅专栏

在Vue应用中，当尝试使用ref绑定的变量在外部被修改时，组件内部可能无法自动检测到变化。文章提出了两种解决方法：一是通过store.watch手动监听状态变更并更新；二是将变量放入对象中，然后绑定整个对象到组件的ref。这两种方法都可以确保组件能正确响应变量的改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要监视的变量如上

组件里用ref绑定该变量，但是发现当变量在其他地方修改后，组件里并没有检测到并更新

解决方法：

1.方法一：组件里手动上监控：

store.watch(
  (state) => state.tool.isShowToolPanel,
  (newVal) => {
    isShowToolArea.value = newVal
  }
)

2.方法二：

将要监控的boolean类型变量放到对象里，绑定整个对象：

组件里：