watch监听不到vuex的数据

Question

同一个项目，同时打开两个页面，一个页面往vuex改变参数（this.$store.commit('xxx',true)）,另一个页面在watch监听这个值，为什么会监听不到呢。。。。

在监听vuex页面尝试过下面这种，还是接收不到数据：
computed: {

aa() {
  return this.$store.state.xxx
}

},
watch:{

aa(newVal){
    console.log(newVal)
}

}

Answer 1

同一个项目，同时打开两个页面

这是指开了两个浏览器选项卡?

跨页面了,代码跑在不同的进程,彼此是隔离的啊.
你得上跨页面通信机制.方案很多.

1. postMessage.
2. 利用同域localstorage事件.

我通常使用第2点.操作localstorage时,已打开的同域页面都会收到storage事件.可以利用这一点进行通信.

Answer 2

要这么写

watch:{

'$store.state.xxx'(newVal){
    console.log(newVal)
}
}

Answer 3

1. 使用computed读取vuex值；
2. 再使用watch监听这个值；

Answer 4

vuex不是用来跨页的。另外，尽量不使用watch，vuex本来就自动响应了，有需要使用计算值computed

Answer 5

了解一下mapGetters，mapState的使用，vuex结合watch就是多此一举的行为vuex的State

import { mapGetters, mapState } from 'vuex'