不同页签vuex同步

不同页签vuex同步

vuex存本地用localStorage，但想vuex数据在不同页签中实时同步，localStorage还有点不够。
问题描述：vuex修改后会存本地，但多个已经打开的页签中vuex并不是同步的，当一个页签把vuex修改后，本地数据也修改了，但其他页签的vuex数据并没有修改，可能导致一些数据上的逻辑错误或者显示错误。
关于这个问题，试了一下网上的几种方法

1. 定时器。
   定时器的原理是在本地加一个flag，当vuex中需要监听的数据变化时改变这个值，在需要监听这个值的页面写一个定时器，隔一段时间看看这个flag，如果flag改变了，就重新把localStorage同步到vuex，再把flag改回来。缺点是定时器不停的发送，并且每个需要实时同步的页面都要写一个这样的定时器，漏掉了就会有各种数据不同步的问题，也不稳定。
2. 监听本地存储
   监听本地存储的方法网上查到了两种。第一种是重新setItem的，window.dispatchEvent派发事件，写了之后直接把内存跑爆了，不知道为啥。第二种是window.addEventLister(‘storage’,function(e){}），这种的不会报各种错或者把内存跑爆。主要写法是在vuex中写下面代码，逻辑进行本地数据赋值给vuex

window.onload = function(){
	window.addEventLister('storage',function(e){
		console.log(e)
	})
}

这样每个需要同步的页面都可以监听到。但还是不很行，不知道为啥。最后只能在要实时的数据前的方法前面手动同步一下vuex和本地存储的数据了。
比如一个操作，这个操作需要当前的vuex和其他页面的vuex数据相同，这时候本地数据被另一个页面的vuex改变了，当前页面的vuex却没有改变，这个时候进行操作前就手动同步一下，把本地数据赋值给vuex。这样两个页面的数据就会实时同步。如果不加上面的监听事件，两边的数据也会同步，但不会实时的显示。