vue中改变了vuex数据视图不更新,也监听不到的原因及解决

在vue中使用vuex进行数据管理时，有时候会出现改变了vuex数据，但是页面视图并没有更新，也没有触发相应的监听事件的情况。这通常是因为没有正确地使用Vue的响应式机制和Vuex的状态更新机制引起的。

以下是解决这个问题的攻略，包含两个示例说明。

1. 使用Vue的响应式机制

在Vue中，只有通过Vue提供的响应式方法或函数才能保证更新视图。通过JavaScript对象直接修改数据，Vue并不会跟踪变化。

因此，在Vuex中，修改state的数据应该使用Vuex提供的mutation方法，而不是直接修改state的属性值。

例如，下面的代码演示了如何通过mutation方法更新state的数据：

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

<!-- Counter.vue -->
<template>
  <div>
    <p>Count: {{$store.state.count}}</p>
    <button @click="$store.commit('increment')">increment</button>
  </div>
</template>

在上面的示例中，当我们点击按钮时，increment方法会通过$store.commit('increment')的方式触发，而不是直接修改count的属性值。这样做的好处是，可以保证视图更新，并且可以跟踪修改的过程。

2. 使用Vue的计算属性

Vue的计算属性是一个关键的特性，可以使我们轻松地实现各种复杂的计算逻辑，并且在数据变化时自动更新视图。

在Vuex中，我们可以使用计算属性来将state的数据映射到组件的属性上，从而实现视图的响应式更新。

例如，下面的代码演示了如何使用计算属性将state的数据映射到组件中：

// store.js
const store = new Vuex.Store({
  state: {
    todos: [
      { text: 'Learn Vue', done: true },
      { text: 'Build an app', done: false },
      { text: 'Deploy to server', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    toggleTodo: (state, todo) => {
      todo.done = !todo.done
    }
  }
})

<!-- TodoList.vue -->
<template>
  <ul>
    <li v-for="todo in doneTodos" :key="todo.text">
      <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
      {{ todo.text }}
    </li>
  </ul>
</template>
<script>
  export default {
    computed: {
      doneTodos () {
        return this.$store.getters.doneTodos
      }
    },
    methods: {
      toggle (todo) {
        this.$store.commit('toggleTodo', todo)
      }
    }
  }
</script>

在上面的示例中，我们定义了一个计算属性doneTodos来计算已完成任务的列表，然后将它映射到了组件的属性中，从而实现了视图的响应式更新。同时，我们在toggle方法中通过$store.commit方法来触发mutation方法，从而更改state的数据。这样做的好处是，我们可以通过计算属性来实现复杂的数据操作和数据过滤，同时视图也可以得到及时更新。

总结：在Vuex中，正确地使用Vue的响应式机制和计算属性是保证数据响应式更新的关键。如果出现了视图不更新或监听不到的问题，一定要检查是否有直接修改state的属性值，或者是否正确地使用计算属性来映射state的数据到组件中。