如何监听 Vuex 数据的变化？

1. 使用 computed 属性

在 Vue 组件中，你可以使用 computed 属性来从 Vuex store 中获取数据，并响应数据的变化。这种方式是最常见和推荐的，因为 computed 属性会自动追踪其依赖，并在数据变化时重新计算。

示例

<template>
  <div>{{ count }}</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    // 直接使用 mapState 辅助函数将 Vuex 状态映射为计算属性
    ...mapState(['count'])
  }
};
</script>

在上面的例子中，当 count 状态发生变化时，count 计算属性会自动更新。

2. 使用 Vuex 的 watch 方法

Vuex 提供了 store.watch 方法，可以监测 Vuex store 中的特定状态或计算属性的变化。与 Vue 的 watch 方法类似，它可以指定回调函数，在监测到变化时执行。

示例

// 在 Vue 组件或任意地方
this.$store.watch(
  (state) => state.count,
  (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`);
  }
);

store.watch 接受两个参数：第一个参数是一个函数，用于指定要监测的状态，第二个参数是变化后的回调函数。

3. 使用 Vue 组件的 watch 选项

在 Vue 组件中，除了使用 computed 属性外，还可以使用 watch 选项来监听 Vuex store 中的状态变化。

示例

<template>
  <div>{{ count }}</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    }
  }
};
</script>

在这个例子中，当 count 状态发生变化时，watch 选项中的 count 监视器会被调用。

4. 使用 Vuex 插件

如果需要在多个地方监听 Vuex 状态的变化，可以编写一个 Vuex 插件。插件可以在每次状态变化时执行特定逻辑。

示例

const myPlugin = (store) => {
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    console.log(`Mutation ${mutation.type} with payload ${mutation.payload}`);
  });
};

const store = new Vuex.Store({
  // 其他选项
  plugins: [myPlugin]
});

在这个例子中，store.subscribe 方法会在每次 mutation 之后调用，参数包含 mutation 的详细信息和最新的 state。

总结

这些方法可以帮助你在不同的场景下监听和响应 Vuex store 中数据的变化。选择使用哪种方法取决于你的具体需求和代码结构。