H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vuex 如何监听页面状态的变化?

1.在A页面修改了Vuex中状态。需要在B页面实时进行监听。
2.如何实现?

回答:

由于 Vuex 的状态存储本来就是响应式的,从 store 实例中读取状态最简单的方法,就是在计算属性中返回某个状态。

B 页面引入以下代码:

computed: {
    myValue() {
        return this.$store.state.someValue
    }
}

此时,当 A 页面通过某种方式更改了 this.$store.state.someValue 的值,B 页面myValue 的值便会自动得到更新。

如果题主所指的监听,是要在这个值变化后触发其他动作,则需要在 B 页面加入侦听属性:

watch: {
    myValue: function(newVal, oldVal) {
        //其他业务代码
    }
}

回答:

有类似的问题及答案额

回答:

  computed: {
    isOpened() {
      return this.$store.getters.sidebar.opened;
    },
  },

监听getters.sidebar.opened

回答:

把要监听的值 赋给一个变量然后在watch中 监听

回答:

import { mapGetters } from 'vuex' 

 computed: {
      ...mapGetters({
          auth: 'auth'
      })
    },
    watch: {
      auth: function(val,oldVal){
      //业务代码
    },

回答:

直接在watch里监控store

watch: {
    '$store.state. someValue': function () {
      // 业务逻辑
    },
  },

本文地址:H5W3 » vuex 如何监听页面状态的变化?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址