监听loacalstrage的变化

在main.js中写监听事件

Vue.prototype.resetSetItem = function (key, newVal) {
     if (key === 'collapsed') {

      // 创建一个StorageEvent事件
      var newStorageEvent = document.createEvent('StorageEvent')
      const storage = {
       setItem: function (k, val) {
      //  sessionStorage.setItem(k, val)
      localStorage.setItem(k,val)
       // 初始化创建的事件
       newStorageEvent.initStorageEvent(
       'setItem',
       false,
       false,
       k,
       null,
       val,
       null,
       null
       )
       // 派发对象
       window.dispatchEvent(newStorageEvent)
       }
      }
     return storage.setItem(key, newVal)
     }
}

当值变化的时候

 window.localStorage.setItem('collapsed',this.collapsed)

用到需要监听的地方

created() {
 let widthColl = 230;
    window.addEventListener('setItem', ()=> {
      if(localStorage.getItem('collapsed') == 'true') {
      widthColl = 110;
      }else {
      widthColl = 230;

      }
      console.log('dddd',widthColl)
      document.querySelector('.save').style.width = `calc(100% - ${widthColl}px)`;
    })
}

为了监听页面菜单栏的伸缩，去控制页面固定标签的宽度