vue 全局监听sessionStorage变化

一、首先新建一个global.js 文件  （我的js 文件为这个名字，名字自己定义）

export default {
    
    install(Vue)
    {
        Vue.prototype.addTabs = function (values) {
            // values 为传过来的值，往sessionStorage里存的时候要转成字符串
            this.resetSetItem('tabsName', JSON.stringify(values));
        },
        
        Vue.prototype.resetSetItem = function (key, newVal) {
           // 这里面只监听  sessionStorage 中key 为tabsName 的变化
             if (key === 'tabsName') {   

         
                // 创建一个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);
            }
         }
        
        
    }


    
}

第二步；将你的js 文件导入到min.js 中，并挂载到vue 实例上

import './lib/axios.js'  // 导入路径，根据自己项目的位置而定
Vue.use(global);

第三步；在你需要用到的地方；的 created() {}  中写下如下代码

// 监听sessionStorage 中的变化
    window.addEventListener("setItem", () => {
          // 变化以后你要做的操作
            let  values = sessionStorage.getItem("tabsName");
            console.log(values)
    });

第四步；调用

this.addTabs({id:123,name:"张三"});   

// 我这里存了一个对象，你可以存数组；方法一样

这个方法是全局调用的，不用声明，因为已经挂载在vue 原型上了

 

扩展 如果想监听多个值变化 第一步改写如下：

export default {
    
    install(Vue)
    {
        Vue.prototype.addTabs = function (values) {
            this.resetSetItem('tabsName', JSON.stringify(values));
        },

        // 删除sessionStorage 中一个数组中的一个对象。
        Vue.prototype.deleteTabs = function(vales){
            let tabsList = JSON.parse(sessionStorage.getItem("tabsList"))
            for(let i = 0,max = tabsList.length;i<max;i+=1){
                if(vales.name == tabsList[i].name){
                    tabsList.splice(i,1)
                    break;
                }
            }
           
            this.resetSetItem('tabsList', JSON.stringify(tabsList));
        },

        Vue.prototype.resetSetItem = function (key, newVal) {
            if (key === 'tabsName' || key === 'tabsList') {
         
                // 创建一个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);
            }
         }
        
    }


    
}

第三步改写如下

 window.addEventListener("setItem", res => {

        // res 中能后返回 sessionStorage 中的 key  你可以打印出来看看 
      if (res.key == "tabsList") {
            // 业务逻辑 
            // tabsList 变化时候 的操作
       
      } else {
        //  tabsName 变化时的操作   因为 我这里只监听了两个
        
      }
    });

比方说：现在sessionStorage 中 key  为tabsList 的数组为

[{id:123,name:"张三"},{id:456,name:"李四"}]

调用删除方法

this.deleteTabs({name:'李四',id:456})

只能通过  this.addTabs({})  或者  this.deleteTabs（{}）； 执行才能被监听到。

具体实现原理，有兴趣的话，请自行查找资料。麻烦知道的同学，请留言

 

声明：本文参考以下博客（可能有其他的；比较多，只找到这一个。如果，有你的请留言，一定加上）

https://www.cnblogs.com/wy120/p/11775475.html