[vue项目] 对vuex里的变量进行监听

Jave2108

已于 2022-06-30 23:45:41 修改

阅读量1k

点赞数

分类专栏： VUE JavaScript 文章标签： vue.js 前端 javascript

于 2022-06-30 23:18:45 首次发布

本文链接：https://blog.csdn.net/JaveWong/article/details/125523172

版权

JavaScript 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

VUE

21 篇文章 4 订阅

订阅专栏

本文介绍了在Vue项目中如何使用computed和watch属性来实现实时监听Vuex状态变化，以实现页面内容的动态更新。以info.vue页面为例，展示了如何监听并响应$store.state.roleCode变量，确保当roleCode变化时，页面的roleName也会同步更新，从而保证页面内容的即时性。

摘要由CSDN通过智能技术生成

我们在做vue项目开发的时候，会调用vuex里面变量，并且页面的内容需要根据vuex里面的变量的变化进行内容的及时响应，这个时候就需要我们对vuex里面的变量的实时监听（其他数据均可采用该方法进行实时监听）。

例如：我们开发info.vue页面，需要用到vuex里面的roleCode变量值，但是roleCode值是不断进行变化的，这样info.vue页面就需要对roleCode变量进行实时的获取，进而对页面重新渲染。

对roleCode变量进行实时监听，需要用到computed、watch方法：

index.js

state: {
    roleCode: ''
}

info.vue(调用的vue页面)

computed: {
    roleName:{
      get() {
        return this.$store.state.roleCode;
      },
      set(newValue) {
        return newValue;
      },
    }
  },
  watch: {
    '$store.state.roleCode': {
      handler(newVal,oldVal){
        console.log(newVal);
        this.roleName = newVal
      },
      immediate: true,
      deep: true
    }
  },