vuex某个数据发生变化 用到数据的组件怎么监听触发重新渲染

在Vue组件中监听Vuex store中的数据变化，需要使用Vuex提供的辅助函数mapState、mapGetters、mapActions和mapMutations中的computed选项和watch选项。

使用mapState辅助函数可以将Vuex store中的数据映射到组件的计算属性中，当store中的数据发生变化时，计算属性会自动更新，从而触发组件的重新渲染。

使用watch选项可以监听Vuex store中的数据变化，当数据发生变化时，执行相应的回调函数，从而触发组件的重新渲染。

下面是一个简单的示例代码：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

export default store

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  },
  watch: {
    count() {
      console.log('count changed')
    }
  }
}
</script>

在上面的示例代码中，MyComponent.vue组件通过mapState辅助函数将Vuex store中的count数据映射到了组件的计算属性count中，当store中的数据发生变化时，计算属性会自动更新，从而触发组件的重新渲染。同时，使用mapMutations辅助函数将Vuex store中的increment方法映射到组件的increment方法中，点击按钮时可以执行这个方法，从而修改store中的数据。在watch选项中，监听了count数据的变化，当数据发生变化时，会执行相应的回调函数，从而触发组件的重新渲染