Vue.js Vuex 不更新使用 mapState 映射的计算属性

在本文中，我们将介绍 Vue.js 中的 Vuex，以及如何使用 mapState 方法将 Vuex 的状态映射为计算属性。我们还将讨论在使用 mapState 方法时可能遇到的问题，特别是计算属性不更新的情况，并提供示例代码来说明这个问题的原因以及解决方法。

阅读更多：Vue.js 教程

Vue.js 和 Vuex 简介

Vue.js 是一个用于构建用户界面的渐进式框架。它通过使用组件化的开发方式、数据驱动的视图更新机制和声明式渲染等特性，使得开发者可以更轻松地构建复杂的应用程序。

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它可以集中管理应用程序的所有组件的状态，并提供了一些特性和方法来使状态的修改和获取更加方便和可追踪。

使用 mapState 方法将状态映射为计算属性

在 Vue.js 应用中，我们可以使用计算属性来处理一些复杂的逻辑或者是需要缓存的数据。而在使用 Vuex 管理状态时，我们可以通过 mapState 方法将 Vuex 的状态映射为计算属性。

mapState 方法接收一个包含状态字段名的数组或是一个对象，返回一个计算属性的对象。这样，我们就可以在组件中像使用计算属性一样使用这些映射的状态。

下面是一个简单的示例，演示了如何通过 mapState 方法将 Vuex 的状态映射为计算属性：

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

// Vue 组件
export default {
  computed: {
    ...mapState(['count', 'doubleCount'])
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}

在上面的示例中，我们使用了 mapState 方法将 count 和 doubleCount 这两个状态字段映射为计算属性。然后，我们可以在组件中通过 this.count 和 this.doubleCount 访问这两个状态。

计算属性不更新的问题分析

然而，有时候我们会发现，当修改了状态字段的值后，我们映射的计算属性并没有及时更新。这可能会导致应用程序的行为与我们预期的不一致。

这个问题的原因是因为在 Vue.js 中，计算属性是根据它依赖的状态来决定是否需要重新计算的。当状态发生变化时，计算属性会被重新计算，并且在下次访问时返回缓存的结果。然而，由于 Vuex 的状态是响应式的，它会被 Vue.js 自动追踪，但是由于计算属性并没有直接依赖状态字段，所以变化不会自动触发计算属性的重新计算。

解决计算属性不更新的方法

要解决计算属性不更新的问题，我们可以使用计算属性的依赖收集机制来告诉计算属性它依赖的状态字段。具体来说，我们可以将计算属性所依赖的状态字段包装到一个函数中，并将这个函数作为计算属性的 getter。

下面是修改后的示例代码：

// Vue 组件
export default {
  computed: {
    ...mapState({
      count: state => state.count,
      doubleCount: state => state.count * 2
    })
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}

在上面的示例中，我们使用了一个函数来定义计算属性的 getter，并将这个函数作为参数传递给 mapState 方法。这样，当状态字段变化时，计算属性就会重新计算，并返回更新后的结果。