vue3 监听vuex数据变化

在 Vue 3 中，你可以通过使用`watch`函数来监听 Vuex 数据的变化。具体步骤如下：

1. 在组件中导入 Vuex 的状态。

import { computed, watch } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)

    return {
      count
    }
  }
}

2. 在 `watch` 函数中监听状态变化。

watch(
  () => store.state.count,
  (newCount, oldCount) => {
    console.log(`count changed from ${oldCount} to ${newCount}`)
  }
)

3. 在组件卸载时取消监听。

const stopWatching = watch(
  () => store.state.count,
  (newCount, oldCount) => {
    console.log(`count changed from ${oldCount} to ${newCount}`)
  }
)

onBeforeUnmount(() => {
  stopWatching()
})

相关问题

vue3监听vuex中数据变化

在Vue 3中，你可以使用`watch`函数来监听Vuex中的数据变化。具体步骤如下：

1. 在组件中引入Vuex store，可以使用`useStore`函数来获取store实例：

import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    // ...
  }
}

2. 使用`watch`函数监听store中的数据变化，需要传入两个参数：要监听的数据（可以是getter函数）和回调函数。

import { useStore, watch } from 'vuex'
export default {
  setup() {
    const store = useStore()

    // 监听state中的count变化
    watch(() => store.state.count, (newValue, oldValue) => {
      console.log(`count变化了，新值为${newValue}，旧值为${oldValue}`)
    })

    // 监听getter中的userInfo变化
    watch(() => store.getters.userInfo, (newValue, oldValue) => {
      console.log(`userInfo变化了，新值为${newValue}，旧值为${oldValue}`)
    })

    // ...
  }
}

这样就可以监听Vuex中任意数据的变化了。需要注意的是，`watch`函数必须在`setup`函数内部使用。另外，在Vue 3中，如果要监听响应式对象的变化，建议使用`watchEffect`函数。

vue 监听vuex数据变化

在Vue中，你可以通过`watch`属性来监听Vuex的数据变化。首先在组件中引入`Vuex`，然后通过`mapState`将需要监听的state映射到组件的计算属性中，接着使用`watch`来监听计算属性的变化。

以下是一个示例代码：

<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count']) // 映射state到组件的计算属性中
  },
  watch: {
    count: function (newCount, oldCount) {
      console.log('count变化了：', newCount, oldCount)
    }
  }
}
</script>

在上述代码中，我们将Vuex中的`count`状态映射到了组件的计算属性中，并使用`watch`来监听计算属性`count`的变化。当`count`发生变化时，就会执行`watch`中的回调函数，打印出新旧值。