vue中通过监听localStorage数据变化，实现2个vue组件之间的数据同步

2个vue组件之间数据同步，可以通过监听localStorage数据变化，来改变数据的值。
通过查询网上很多方式，也遇到一些问题，我总结了一下：
第一种方法：（本文用这种方法）
重写setItem事件，当使用setItem的时候，触发window.dispatchEvent派发事件
第二种方法：用vuex,此方法我还没有研究
具体步骤：
1.我们写一个dispatchEvent派发事件的js文件，放在一个文件夹里面，比如：utils/tool.js代码如下

function dispatchEventStroage () {
    const signSetItem = localStorage.setItem
    localStorage.setItem = function (key, val) {
        let setEvent = new Event('setItemEvent')
        setEvent.key = key
        setEvent.newValue = val
        window.dispatchEvent(setEvent)
        signSetItem.apply(this, arguments)
    }
}

export default dispatchEventStroage

2.在主文件main.js文件中加入一下代码，以便二个vue组件能够触发派发事假

import tool from './utils/tool.js'
Vue.use(tool)

3.在一个vue组件当中向localStorage存储数据，代码如下：

// gsStorename是key名称（存储名称）,gsStroe是值，我这里是一个对象，换成json字符串
window.localStorage.setItem('gsStorename', JSON.stringify(gsStore))

4.在另一个vue组件当中监听localStorage数据变化，来赋值，监听要写在mounted ()中，代码如下：
解释：通过addEventListener监听setItemEvent事件来获取新变化的值，e.newValue就是我们的新值，然后用这个值操作其他

      mounted () {
      // 监听localhostStorage的数据变化，结合utils/tool.js配合使用
      const that = this
      window.addEventListener('setItemEvent', function (e) {
          let newdata = JSON.parse(e.newValue)
          that.order = newdata.order
          that.cart = newdata.cart
        })
      },

特别注意：
我刚开始做的时候，考虑不周，没有写const that=this 这一句，我用的如下代码，一直报错，赋值不了，如下代码是错误的，
为什么要用const that=this这一个呢？
那是因为在JavaScript中，this代表的是当前对象，他是会随程序运行不停改变的，
如果用this的话，this是addEventListener监听中当前的对象，所以赋值的时候不能赋值到外面去。
const that = this 其实就是在this改变之前先复制一份给that，那么在程序后面的运行中就可以用that来赋值该函数以外的对象了，比如that.order

      mounted () {
      // 监听localhostStorage的数据变化，结合utils/tool.js配合使用
      window.addEventListener('setItemEvent', function (e) {
          let newdata = JSON.parse(e.newValue)
          this.order = newdata.order 
          this.cart = newdata.cart
        })
      },