Vuex 计算属性：当 store 变化时，为什么不响应？解决方案和常见问题

Vuex 计算属性的坑：当 store 变化时不会响应？

作为一名经验丰富的程序员，我在使用 Vuex 中的计算属性时遇到一个坑，当 store 中的值发生变化时，组件中的计算属性竟然不会更新！

问题

想象一下这个场景：

import { mapState } from 'vuex';

computed: {
  ...mapState(['nav.type']),
  isWide() {
    return this.nav.type === 'wide';
  }
}

当 this.$store.state.nav.type 发生变化时，this.isWide 仍然保留其初始值。这简直就像一个恼人的 Bug，影响着组件的响应性。

原因分析

罪魁祸首是 Vuex 计算属性的缓存机制。在初始化组件时，Vue 会贴心地将计算属性的值缓存起来。但当依赖的 store 值发生变化时，Vue 却不会自动重新计算，因为它天真地假设该值不会改变。

解决方法

为了让我们的计算属性重获新生，有两种方法：

方法 1：使用侦听器

像一个尽职的侦探，我们可以使用侦听器来监视 store 的变化：

watch: {
  '$store.state.nav.type': {
    handler(newVal, oldVal) {
      this.isWide = newVal === 'wide';
    },
    immediate: true
  }
}

方法 2：使用 mapState 辅助函数

Vuex 提供了一个更优雅的解决方案：mapState 辅助函数。它可以将 store 的状态直接映射到组件的计算属性，让 Vue 替我们处理更新：

import { mapState } from 'vuex';

computed: {
  ...mapState(['nav.type']),
  isWide() {
    return this.nav.type === 'wide';
  }
}

建议

虽然侦听器可以解决问题，但我更推荐使用 mapState 辅助函数。它不仅简化了代码，还确保了计算属性始终与 store 同步。

结语

问题解决了，我们又可以安心地使用 Vuex 计算属性了。记住，了解 Vuex 的缓存机制对于确保计算属性的响应性至关重要。所以，下次在计算属性中使用 store 值时，请牢记这篇文章中的内容，避免掉入这个坑。

常见问题解答

1. 为什么 Vue 会缓存计算属性的值？

为了提高性能，Vue 会缓存计算属性的值，以避免在不必要的情况下重复计算。

2. 除了侦听器和 mapState，还有其他方法可以更新计算属性吗？

是的，还可以使用 forceUpdate() 方法或在计算属性的 getter 函数中使用 this.$store.watch()。

3. mapState 是否会增加组件的渲染次数？

不会。mapState 会优化计算属性的更新，只会在 store 中依赖的值发生变化时才会更新组件。

4. 是否可以在组件的 setup() 函数中使用 mapState？

可以，可以使用 useStore() 钩子获取 store，然后使用 store.mapState() 函数。

5. mapState 是否适用于嵌套的 store 模块？

是的，mapState 可以用于嵌套的 store 模块，只需使用模块的名称作为前缀即可，例如 mapState('moduleName')。