面试题：如何监听 Vuex 数据的变化？

在 Vue 中，监听 Vuex 数据的变化是常见的需求。以下是几种常用的方法：

1. 使用 `watch`

通过 watch 监听 Vuex 的 state 或 getter 的变化。

示例

export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log('count 变化:', newVal, oldVal);
    }
  }
};

说明

computed：将 Vuex 的 state 或 getter 映射为组件的计算属性。
watch：监听计算属性的变化。

2. 使用 `mapState` 和 `watch`

结合 mapState 辅助函数和 watch 监听 Vuex 数据的变化。

示例

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  watch: {
    count(newVal, oldVal) {
      console.log('count 变化:', newVal, oldVal);
    }
  }
};

说明

mapState：将 Vuex 的 state 映射为组件的计算属性。
watch：监听计算属性的变化。

3. 使用 `store.subscribe`

通过 store.subscribe 监听 Vuex 的 mutation，从而间接监听 state 的变化。

示例

export default {
  created() {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'increment') {
        console.log('count 变化:', state.count);
      }
    });
  }
};

说明

store.subscribe：监听所有的 mutation。
mutation.type：判断具体的 mutation 类型。

4. 使用 `store.watch`

通过 store.watch 监听 Vuex 的 state 或 getter 的变化。

示例

export default {
  created() {
    this.unwatch = this.$store.watch(
      (state) => state.count,
      (newVal, oldVal) => {
        console.log('count 变化:', newVal, oldVal);
      }
    );
  },
  beforeDestroy() {
    this.unwatch(); // 取消监听
  }
};

说明

store.watch：监听 state 或 getter 的变化。
unwatch：返回一个取消监听的函数。

5. 使用 `mapGetters` 和 `watch`

结合 mapGetters 辅助函数和 watch 监听 Vuex 的 getter 的变化。

示例

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['doubleCount'])
  },
  watch: {
    doubleCount(newVal, oldVal) {
      console.log('doubleCount 变化:', newVal, oldVal);
    }
  }
};

说明

mapGetters：将 Vuex 的 getter 映射为组件的计算属性。
watch：监听计算属性的变化。

6. 使用 `Vuex` 插件

通过 Vuex 插件监听 state 的变化。

示例

const plugin = (store) => {
  store.subscribe((mutation, state) => {
    console.log('mutation:', mutation);
    console.log('state:', state);
  });
};

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  plugins: [plugin]
});

说明

插件：在插件中监听 mutation 和 state 的变化。

7. 使用 `Vuex` 的 `action`

在 action 中监听 state 的变化。

示例

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit, state }) {
      commit('increment');
      console.log('count 变化:', state.count);
    }
  }
});

说明

action：在 action 中提交 mutation 并监听 state 的变化。

8. 使用 `Vuex` 的 `getter`

通过 getter 监听 state 的变化。

示例

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

store.watch(
  (state, getters) => getters.doubleCount,
  (newVal, oldVal) => {
    console.log('doubleCount 变化:', newVal, oldVal);
  }
);