Vuex无法观察到值变化怎么解决

Vuex是一个基于Vue的状态管理库，可以让我们更方便地管理应用的数据。在使用Vuex的过程中，有时候我们会遇到无法观察到值变化的情况，这可能是由于以下原因：

1. state属性不可变

Vuex的state属性是一个对象，如果直接修改该对象的属性值，是无法触发Vue的响应式更新的。解决这个问题的方法是使用Vue.set或者this.$set来修改属性值，这样才能触发Vue的响应式更新。例如：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    obj: {}
  },
  mutations: {
    INCREMENT (state) {
      state.count++
    },
    UPDATE_OBJ (state, payload) {
      // 错误的方式，不会触发响应式更新
      // state.obj.name = payload.name
      // state.obj.age = payload.age
      
      // 正确的方式，使用Vue.set或this.$set来修改对象属性值
      Vue.set(state.obj, 'name', payload.name)
      Vue.set(state.obj, 'age', payload.age)
    }
  }
})

export default store

2. 异步操作

如果我们在mutation内部进行了异步操作，例如发送了一个ajax请求，那么这个异步操作是不会触发Vue的响应式更新的。这时候我们可以使用action来处理异步操作，并在异步操作完成后再提交mutation来修改state值。例如：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    INCREMENT (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('INCREMENT')
      }, 1000)
    }
  }
})

export default store

3. 绑定的变量发生了变化

有时候我们在Vue组件内部绑定了一个计算属性或者方法，但是这个计算属性或方法内部返回的对象发生了改变，但是这个变化却无法被Vuex监听到。解决这个问题的方法是在调用这个计算属性或方法时，使用一个新的变量来接收返回值。例如：

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      // 返回一个对象
      return {
        num: this.$store.state.count
      }
    }
  },
  methods: {
    increment () {
      this.$store.commit('INCREMENT')
    }
  }
}
</script>

这个时候，我们如果直接在模板中渲染count.num是无法触发响应式更新的。这时候，我们可以使用一个新变量来接收count.num的值：

<template>
  <div>
    <p>count: {{ countNum }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    countNum () {
      // 使用一个新变量来接收count.num的值
      return this.count.num
    },
    count () {
      // 返回一个对象
      return {
        num: this.$store.state.count
      }
    }
  },
  methods: {
    increment () {
      this.$store.commit('INCREMENT')
    }
  }
}
</script>

4. 组件的深度监听

有时候我们需要监听某个对象的深层属性变化，这时候我们可以使用Vuex提供的插件vue-mutation-observer来实现深度监听。首先，我们需要安装vue-mutation-observer插件：

npm install vue-mutation-observer

然后在Vuex的store中引入该插件：

import MutationObserver from 'vue-mutation-observer'
Vue.use(MutationObserver)

接着，在组件中使用$observe来监听对象属性的深层变化：

<template>
  <div>
    <p>person: {{ person.name }} - {{ person.age }}</p>
    <input v-model="person.name">
    <input v-model="person.age">
  </div>
</template>

<script>
export default {
  data () {
    return {
      person: {
        name: 'Tom',
        age: 20
      }
    }
  },
  created () {
    this.$observe(this.person, () => {
      console.log('object changed')
      // 执行相应的操作
    })
  }
}
</script>

总结：

无法观察到值变化的问题有很多种可能，需要具体情况具体分析。但可以使用以上几种方法来解决。在使用Vuex时，我们需要注意state的属性不可变的问题，以及异步操作和组件深度监听的问题。