50+Vue经典面试题源码级详解（42）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

前言

小伙伴们好，这是村长《Vue经典面试题源码级详解》系列文章第 42 题，前面已完成题目合集在此： 历时一个月，2.6W字！50+Vue经典面试题源码级详解，你值得收藏！

学习群

我组织了一个面试学习群，关注村长公众号村长学前端，回复“加群”，大家一起卷~

相关学习资源

本系列有配套视频，思维导图和开源项目，大家学习同时千万不要忘了三连 + 关注 + 分享，有道是喝水不忘挖井人~

• 视频教程：56道经典Vue面试题详解
• 思维导图：Vue面试专题
• 配套代码：vue-interview

42-怎么监听vuex数据的变化？

分析

vuex数据状态是响应式的，所以状态变视图跟着变，但是有时还是需要知道数据状态变了从而做一些事情。

既然状态都是响应式的，那自然可以watch，另外vuex也提供了订阅的API：store.subscribe()。

---

思路

• 总述知道的方法

• 分别阐述用法

• 选择和场景

---

回答范例

• 我知道几种方法：

  • 可以通过watch选项或者watch方法监听状态
  • 可以使用vuex提供的API：store.subscribe()

• watch选项方式，可以以字符串形式监听$store.state.xx；subscribe方式，可以调用store.subscribe(cb),回调函数接收mutation对象和state对象，这样可以进一步判断mutation.type是否是期待的那个，从而进一步做后续处理。

• watch方式简单好用，且能获取变化前后值，首选；subscribe方法会被所有commit行为触发，因此还需要判断mutation.type，用起来略繁琐，一般用于vuex插件中。

实践

watch方式

const app = createApp({
    watch: {
      '$store.state.counter'() {
        console.log('counter change!');
      }
    }
  })
复制代码

subscribe方式：

  store.subscribe((mutation, state) => {
    if (mutation.type === 'add') {
      console.log('counter change in subscribe()!');
    }
  })
复制代码