Vuex Store中监听嵌套对象变更不生效，如何实现深层监听？

嘿，这个问题我之前也碰到过——Vuex的watch默认是浅监听的，也就是说只有当state.httpRequest的引用发生变化时（比如你直接给它赋值一个新对象），监听才会触发。如果只是修改它内部的嵌套属性，因为对象本身的引用没改，watch就不会察觉到变化。

下面给你三种可行的解决方案，你可以根据实际场景选择：

1. 开启深度监听（最直接的方案） #

给$store.watch添加第三个参数{ deep: true }，让它递归监听对象内部的所有属性变化：

created() {
  this.$store.watch(
    state => state.httpRequest,
    (oldVal, newVal) => {
      console.log(oldVal, newVal);
    },
    { deep: true } // 开启深度监听
  );
}

⚠️ 注意：深度监听会遍历对象的所有嵌套属性，如果你监听的对象很大或者层级很深，可能会有一定的性能开销，所以只在必要时使用。

2. 以Immutable方式更新状态（推荐的最佳实践） #

在Vuex的mutation中，不要直接修改httpRequest的内部属性，而是返回一个新的对象，这样state.httpRequest的引用会发生变化，原来的浅监听就能正常触发：

// 在你的Vuex store的mutations中
mutations: {
  UPDATE_HTTP_REQUEST(state, payload) {
    // 错误写法：直接修改内部属性，引用不变
    // state.httpRequest.url = payload.url;
    // state.httpRequest.status = payload.status;

    // 正确写法：展开原对象，合并新属性，返回新对象
    state.httpRequest = {
      ...state.httpRequest,
      ...payload
    };
  }
}

这种方式不仅能让watch正常工作，还更符合Vuex的状态管理理念——状态变更可追踪，也能避免一些意外的响应式问题，性能比深度监听更好。

3. 直接监听嵌套属性（精准监听） #

如果你只关心httpRequest里的某几个特定属性，没必要监听整个对象，直接监听目标属性即可，性能更优：

created() {
  this.$store.watch(
    // 直接监听嵌套的目标属性
    state => state.httpRequest.specificProperty,
    (oldVal, newVal) => {
      console.log(oldVal, newVal);
    }
  );
}

比如你只需要监听httpRequest的loading状态或者response属性，就可以用这种方式，不需要开启深度监听。

内容的提问来源于stack exchange，提问作者Shamoon