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

Question

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

Answer 1

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

在 B 页面引入以下代码：

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

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

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

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

Answer 2

有类似的问题及答案额

Answer 3

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

监听getters.sidebar.opened

Answer 4

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

Answer 5

import { mapGetters } from 'vuex' 

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

Answer 6

直接在watch里监控store

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