vue.js - Vuex状态更新不触发组件更新，如何排查和修复？

Question

同一个版本的自定义组件，在一个项目中正常使用，另一个项目vuex store的state状态改变后，组件无法监听到

store中代码如下：

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
    computedCount: state => {
      return state.count
    }
  },
  mutations: {
    
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  modules: {
  }
})

组件中代码如下：

<template>
  <div>
    <button @click="test" style="width: 50px;height: 50px;">count加一</button>
    <div>this.count: {{ count }}</div>
    <div>$store.state.count: {{ $store.state.count }}</div>
    <div>countValue: {{ countValue }}</div>
    <div>getCount: {{ getCount }}</div>
  </div>
  </template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  name :'ddd',
  computed: {
    ...mapState([
      'count'
    ]),

    countValue() {
      return this.$store.state.count
    },

    ...mapGetters({
      getCount: 'computedCount'
    })
  },
  methods: {
    ...mapActions({
      add: 'incrementAsync' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    }),
    test() {
      this.add()
    }
  },
  mounted() {
    // this.$nextTick(function() {
    // this.add()
    // })
  },
  watch: {
    '$store.state.count': {
      deep: true,
      handler(newVal) {
        console.log('监听$store.state.count', newVal)
      }
    },
    countValue: {
      handler(newVal) {
        console.log('监听count', newVal)
      },
      deep: true
    }
  }

}
</script>

一个项目使用正常：

一个项目使用有误：

vue和vuex版本都是一样的，有没有大佬知道是什么原因？

Answer 1

在Vuex中，当状态(state)通过mutation被更新时，任何依赖于这个状态的响应式计算或侦听器都应该自动更新。然而，如果你发现状态更新没有触发组件更新，这可能是由于几个不同的原因。以下是一些可能的解决步骤和排查方法：

1. 确保Vuex Store是全局唯一的：
   确保你没有在每个组件或页面中都创建了一个新的Vuex Store实例。每个Vue应用应该只有一个Vuex Store实例。
2. 检查严格模式：
   如果Vuex Store在严格模式下运行（strict: true），并且你直接修改了状态（而不是通过mutation），这可能会导致问题。但在这个例子中，你没有开启严格模式，并且使用了mutation来更新状态，所以这不是问题所在。
3. 检查组件是否确实连接到了Store：
   在你的Vue组件中，你使用了mapState、mapGetters和mapActions来映射Vuex Store的状态、getter和action。确保这些映射是正确的，并且组件已经正确连接到了Store。
4. 检查mapState、mapGetters和mapActions的使用：
   你的代码在mapState中正确地映射了count，但你在模板中使用了{{ count }}而不是{{ this.count }}。这通常不是问题，因为Vue会隐式地查找组件的当前实例（即this），但请确保没有其他的命名冲突。
5. 检查Watcher：
   你的watch中试图监听$store.state.count和countValue。但是，对于$store.state.count，你不需要使用deep: true，因为count是一个基础数据类型（number），而不是一个对象或数组。此外，Vuex的状态已经是响应式的，所以通常不需要在组件中直接监听它。但监听countValue和getter（getCount）是合理的。
6. 检查组件是否重新渲染：
   在Vue DevTools中检查组件树，看看组件是否实际上被重新渲染了。如果组件没有重新渲染，即使数据变化了，模板中的值也不会更新。
7. 检查是否有其他的状态或计算属性影响到了显示：
   如果组件中有其他的状态或计算属性，它们可能会影响到模板中count的显示。确保没有其他代码在修改这些值。
8. 检查Vue和Vuex的版本：
   虽然你提到Vue和Vuex的版本都是一样的，但确保没有其他依赖库或插件与Vuex有版本冲突。
9. 查看浏览器的控制台：
   检查浏览器的控制台是否有任何错误或警告，它们可能会提供有关问题的线索。
10. 尝试简化代码：
    尝试移除一些不必要的代码，如countValue计算属性和对$store.state.count的监听，看看问题是否仍然存在。这有助于确定问题的根源。

如果以上步骤都不能解决问题，那么可能需要更深入地检查你的项目配置或代码。考虑创建一个最小的、可复现问题的示例项目，并逐步添加代码，直到找到问题的根源。