Vuex，在 Vue 组件中监听 Vuex 状态变化，使用watch监听Vuex中的数据

北城笑笑

已于 2024-05-08 14:59:05 修改

阅读量1.6k

点赞数 6

分类专栏： VueJS 文章标签：前端 vue.js

于 2024-05-08 14:55:40 首次发布

本文链接：https://blog.csdn.net/weixin_65793170/article/details/138572340

版权

VueJS 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

简介：在Vue应用程序中使用Vuex进行状态管理时，经常需要在组件中响应状态的变化。这里来记录一下

一. 在使用 Vuex 进行状态管理时，我们经常需要在组件中响应状态的变化。Vue 提供了两种方式来实现这一点：`computed` 属性和 `watch` 选项。这里，我们将通过一个示例来了解如何使用这两种方式来监听 Vuex 状态变化。

首先，我们看一下组件中的代码:

//VUE.JS
import { mapState } from 'vuex';

export default {
  computed: {
    // 映射 Vuex 中的状态到当前组件的计算属性
    ...mapState({
      areaLoadStatus: state => state.areaLoading,
      testDate: state => state.vuexRtspImg
    })
  },

  watch: {
    // 监听 Vuex 中的状态变化
    areaLoadStatus(newValue, oldVal) {
      console.log(newValue, oldVal)
    },
    testDate(newValue, oldVal) {
      console.log(newValue, oldVal)
    }
  }
}

在这段代码中，我们使用了 `mapState` 辅助函数将 Vuex 中的两个状态(`areaLoading` 和 `vuexRtspImg`)映射到组件的计算属性中。这样，我们就可以在组件模板中直接使用这些计算属性，而不必每次都通过 `this.$store.state` 来访问状态。

接下来，我们使用 `watch` 选项来监听这两个状态的变化。当状态发生变化时，相应的监听器函数会被调用，新值和旧值会作为参数传递进来。在这个例子中,我们只是简单地将新值和旧值打印到控制台，但实际情况下吗，你可以在这里执行任何所需的逻辑，例如更新组件的其他数据属性或触发事件函数(如发送 API 请求)。

值得注意的是，`watch` 选项并不是唯一的方式来响应状态变化。如果你只需要在模板中使用状态，那么计算属性可能是一个更好的选择。计算属性会基于依赖的状态自动重新计算，并且在状态变化时会自动更新。这使得它比 `watch` 选项更高效。

二. 现在，让我们看一下在 Vuex 中如何触发状态变化:

//VUEX
actions: {
  async callRtspImg(Con, row) {
    Con.state.areaLoading = true; // 更新 areaLoading 状态

    await postRtsp({ rtspPath: row.videoUrl, cameraId: row.cameraId })
      .then(res => {
        if (res.code === 200) {
          Con.state.areaLoading = false; // 更新 areaLoading 状态
          const data = res;
          Con.state.vuexRtsInfo.wd = data.imageWidth;
          Con.state.vuexRtsInfo.hg = data.imageHeight;
          Con.state.vuexRtsInfo.img = `data:image/gif;base64,${data.data}`;
          Con.state.vuexRtspImg = data.data; // 更新 vuexRtspImg 状态
        } else if (res.code !== 200) {
          // 处理错误
        }
      })
      .catch(() => {})
      .finally(() => {})

  }
}