怎么监听 Vuex 数据的变化？

Question

通过 watch 监听 $store.state.counter 等具体值，也可以通过 store.subscribe 监听 数据变化，下面详细说明：

在 Vuex 中，可以通过以下方式监听数据的变化：

1. 使用 Vuex 的 watch 方法

Vuex 提供了一个 store.watch 方法，专门用于监听 Vuex 中的状态变化。

store.watch(
  (state) => state.someModule.someState, // 监听的状态
  (newValue, oldValue) => {
    console.log('数据变化了:', newValue, oldValue);
  }
);

参数说明：

• 第一个参数是一个函数，返回需要监听的状态。
• 第二个参数是回调函数，接收两个参数： newValue 和 oldValue 。

---

2. 使用 Vuex 的订阅功能（ subscribe ）

store.subscribe 方法允许你监听每一个 mutation 的触发。

store.subscribe((mutation, state) => {
  console.log('mutation 触发:', mutation.type);
  console.log('新的状态:', state);
});

参数说明：

• 第一个参数是一个 mutation 对象，包含 type （mutation 的类型）和 payload （传递的参数）。
• 第二个参数是变化后的状态。

---

3. 结合 Vue 的 watch 监听组件中的状态

如果 Vuex 的状态被映射到组件中，可以直接使用 Vue 的 watch 来监听这些状态。

export default {
  computed: {
    someState() {
      return this.$store.state.someModule.someState;
    },
  },
  watch: {
    someState(newValue, oldValue) {
      console.log('组件中的状态变化:', newValue, oldValue);
    },
  },
};

---

4. 手动触发检查（如果需要更灵活的监听机制）

你也可以在逻辑中主动比较 Vuex 状态，类似于手动检测变化。例如在 setInterval 或自定义逻辑中实现：

let previousState = JSON.stringify(store.state.someModule.someState);

setInterval(() => {
  const currentState = JSON.stringify(store.state.someModule.someState);
  if (currentState !== previousState) {
    console.log('状态发生变化');
    previousState = currentState;
  }
}, 1000);

---

5. 结合插件

如果需要更复杂的状态监听逻辑，可以考虑使用 Vuex 插件。插件可以在状态发生变化时执行特定的逻辑。

插件示例：

const myPlugin = (store) => {
  store.subscribe((mutation, state) => {
    console.log('插件监听到 mutation:', mutation.type);
  });
};

const store = new Vuex.Store({
  plugins: [myPlugin],
});

---

通过上述方法，可以根据实际需求选择合适的方式来监听 Vuex 数据的变化。