关于注册自定义事件及其使用

1、本案例是在vue项目中，监听localStorage的变化，在vuex中获取localStorage的数据，并保存

2、发布及注册事件信息

localStorage(store){
    const storage = {
        setItem:(key,val)=>{
            localStorage.setItem(key,val);
            let StorageEvent = new CustomEvent("Ag-storage",{//声明自定义事件名称，及其他参数信息
                'bubbles':false,//是否冒泡
                'cancelable':false,//是否可取消
                'detail':{//额外参数
                    val
                }
            });
            window.addEventListener("Ag-storage",(e)=>{//监听到自定义事件的触发
                store.dispatch("aUser",JSON.parse(e.detail.val));
            },{
                once:true//只要触发当前一次即可，下次修改会重新进行监听，避免多次调用
            });
            window.dispatchEvent(StorageEvent);//发布注册自定义事件
        }
    }
    return new Promise((resolve,reject)=>{
        resolve(storage);
    });
}

3、在main.js中引用

4、我这里的需求是，修改用户头像时，其它组件的头像也有跟着变化，所以当用户修改头像成功时，this.user是获取的vuex的用户数据

5、当第四步成功执行时，即可触发自定义事件，然后通过传递的参数，同时修改vuex及localStorage的数据，即可达到同步

6、最终效果