A页面 window.open() B页面, B页面computed 里面的值取store里面的值,A页面操作改变值 ,B页面 watch 不到该值的变化
解决办法: 存在local里面,然后监听storage修改, 但是这个只能解决A页面修改值B页面才能监听到,而如果B页面修改这个storage的值也不会被该方法监听到,太emo了,其实B页面改值
computed: {
...mapState('ceshi', {
vuexValue: state => state.vuexValue
})
},
watch: {
vuexValue(val) {
console.log(val) // A页面该值变了监听不到
}
},
mounted() {
// 监听storage
window.addEventListener('storage', this.diaPadLocalStorageWatch)
},
destroyed() {
// 记得移除
window.removeEventListener('storage', this.diaPadLocalStorageWatch)
},
methods: {
diaPadLocalStorageWatch(e) {
if (e.key === 'diaPadLocal') {
console.log(e.newValue)
}
}
}
ps: 本项目的背景是B页面 需要监听这个值,A页面和B页面都能修改这个值,A页面也要用这个值,本来是A页面用了改值一直存在VUEX里面的,但是B监听不到又加了一个存在storage里面,而且不是一个值,是一个对象,各自的值都会变,本来A那边的store做的很好了,结果哪里都要加存local,而且要保证两边的值一致,真的是改死掉了,而且调用的方法都是之前就封装好的方法,用的地方又多,改起来是真的恶心