Vue/Vuex: computed中的mapState未更新

在Vue.js中，computed属性是基于它们的依赖进行缓存的。只有当依赖发生变化时，计算属性才会重新计算。如果你在使用Vuex的mapState辅助函数时发现计算属性没有更新，可能是以下几个原因造成的：

基础概念

• 计算属性（Computed Properties）：在Vue中，计算属性是基于它们的响应式依赖进行缓存的。如果依赖没有发生变化，计算属性不会重新计算。
• Vuex的mapState：这是一个辅助函数，用于将store中的state映射到组件的计算属性中。

可能的原因及解决方法

1. 依赖未发生变化： 确保你映射的state确实发生了变化。如果state没有变化，计算属性自然不会更新。
2. 响应式丢失： 如果你在组件创建之后添加了新的state，Vue可能无法检测到这个变化。确保所有的state都是在组件创建之前就已经定义好的。
3. 模块命名空间问题： 如果你在使用模块化的Vuex store，并且启用了命名空间，你需要确保在mapState中正确地指定了模块的命名空间。
4. 直接修改state： 在Vuex中，应该通过提交mutation来改变state，而不是直接修改它。如果你直接修改了state，Vue可能无法检测到这个变化。

示例代码

假设我们有一个Vuex store，其中有一个名为count的state：

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

在组件中使用mapState：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};

如果你发现count没有更新，可以尝试以下步骤：

• 确保mutation被调用： 在increment方法中添加一个console.log来确认mutation是否被调用。

methods: {
  increment() {
    console.log('Incrementing...');
    this.$store.commit('increment');
  }
}

• 检查state的变化： 在mutation中添加console.log来确认state是否真的发生了变化。

mutations: {
  increment(state) {
    console.log('Before:', state.count);
    state.count++;
    console.log('After:', state.count);
  }
}

• 使用Vue Devtools： 使用Vue Devtools来检查state的变化，确保count的值在每次点击时都在增加。

应用场景

计算属性和Vuex的mapState通常用于以下场景：

• 当你需要基于store中的state来计算衍生值时。
• 当你需要在多个组件中共享相同的state时。

解决问题的步骤

1. 确认依赖是否真的发生了变化。
2. 检查是否有直接修改state的情况，应该使用mutations。
3. 如果使用了模块化的store，确保正确使用了命名空间。
4. 使用Vue Devtools来调试和检查state的变化。

通过以上步骤，你应该能够解决mapState未更新的问题。如果问题仍然存在，可能需要进一步检查代码逻辑或其他潜在的问题。