在vue中监听storage的变化

怼烎@ 2022-05-09 23:50 343阅读 0赞

###### 为什么要监听storage的变化？ ######

> 当我们在使用vue的时候，有时候需要一个两个数据在全局共享，vue虽然提供了vuex模块来解决此问题，但是为了一两个数据的共享引入vuex未免小题大做，所以我们选择使用storage来保存共享数据，但有个问题就是如何监听storage的变化，让我们可以在保存数据的同时，在另外一个路由中监听到变化并执行操作本例子就是演示此方法

[完整示例][Link 1]  
![在这里插入图片描述][70]

##### 怎么监听 #####

1.  首先在main.js中给Vue.protorype注册一个全局方法，其中，我们约定好了想要监听的sessionStorage的key值为’watchStorage’，然后创建一个StorageEvent方法，当我在执行`sessionStorage.setItem(k, val)`这句话的时候，初始化事件，并派发事件。

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

1.  如何触发  
    在一个路由(比如路由A)存储值得时候，使用下面的方法：

this.resetSetItem('watchStorage', this.value);

1.  如何监听  
    如果在另外一个路由(比如路由B)中，我们想根据watchStorage的变化来请求接口刷新页面数据的时候，可以在这个路由中created钩子函数中监听：

window.addEventListener('setItem', ()=> {
    	this.newVal = sessionStorage.getItem('watchStorage');
    })

完整的示例[**点击此处**][Link 1]

[Link 1]: https://github.com/chxlvwh/listenStorage
[70]: /images/20220510/a8fbe70c7dcd47048bf3fff116635d4b.png