Vue监听localstorage变化的方法详解

export default 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)
		// eslint-disable-next-line prefer-rest-params
		signSetItem.apply(this, arguments)
	}
}

import dispatchEventStroage from './utils/watchLocalStorage'
Vue.use(dispatchEventStroage);

mounted () {
      // 监听localhostStorage的数据变化，结合utils/tool.js配合使用
      const that=this 
      window.addEventListener('setItemEvent', function (e) {
        if (e.key === 'myKey') {   // myKey是需要监听的键名
          that.mykey = e.newValue;
          console.log(JSON.parse(e.newValue))   // 这里的newValue就是localStorage中，键名为myKey对应的变化后的值。
          console.log('本地存储值发生变化：', e.newValue)
        }
      })
    },

this.od2Visible = true;
    this.title = '舰船航线规划';
    this.$store.commit("tools/setzhk", 'od5');
    var tempList = [];
    const that = this;
    var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas); // 创建鼠标事件handler
    handler.setInputAction(function(click) { // 监听鼠标左键点击事件
        // 获取点击位置的地球坐标
        var cartesian = window.viewer.camera.pickEllipsoid(click.position, window.viewer.scene.globe.ellipsoid);
        // 转换为笛卡尔坐标系 
        let cartographic1 = Cesium.Cartographic.fromCartesian(cartesian);
        // 转换为经纬度
        var latitude = Cesium.Math.toDegrees(cartographic1.latitude);
        var longitude = Cesium.Math.toDegrees(cartographic1.longitude);
        tempList.push(longitude,latitude)
          if (cartesian) {
              var entity = window.viewer.entities.add({ // 在该位置添加点
                  position: cartesian,
                  point: {
                      pixelSize: 10,
                      color: Cesium.Color.YELLOW
                  }
              });
          }
          localStorage.setItem('lonlan',tempList)
          that.$store.commit("tools/setlonlat", tempList);
          console.log(1001,that)
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

computed: {
    lonlat(){
      return this.$store.state.tools.lonlat
    }
  },
  watch: {
    lonlat(newVal,oldVal){
      console.log(1002,newVal,oldVal)
    }
  },