vue 项目监听localStorage或sessionStorage中值得变化

前言

---

在最近开发项目中，做国际化的时候需要监听localStroage中值得变化来切换语言，其实完全可以监听vuex的值，在开发过程中突发奇想，能不能监听localStroage中的值呢，于是就开始折腾，最终出来了，记录一下，方便后续使用和学习。

Step 一

首先在main.js中注册一个全局方法

Vue.prototype.monitorSetItem = function (key, newVal) {
  //这个key就是我们要监听的那个key
    if (key === 'lang') {
        // 创建一个StorageEvent事件
        var newStorageEvent = document.createEvent('StorageEvent');
        const storage = {
            setItem: function (k, val) {
                //这里可以灵活更改local和session
                sessionStorage.setItem(k, val);
                // 初始化创建的事件
                newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
                // 派发对象
                window.dispatchEvent(newStorageEvent)
            }
        }
        return storage.setItem(key, newVal);
    }
}

Step 二

然后在你需要存储的组件内用你注册的方法去存值

      this.resetSetItem('lang', this.$i18n.locale);

Step 三

然后在你需要监听的页面去监听做操作

    window.addEventListener("setItem", (e) => {
       console.log(e);  //这个e可以自己去看一下，里边有你想要的内容
    这个时候就监听到了，然后就做一些操作
    });

结束语

这个方法就可以使用了，以后学到还会更新的，毕竟学到老活到老。