Vue多组件互通数据(通过使用storage储存数据)
导语:
在多个组件需要共用一个值的时候,应用父子组件传值的知识会很麻烦,又没有必要通过vuex来储存几个数据,因此使用storage进行数据存储并实时监听。(可以多个)
1、将想要实时监听的数据存储到storage中
this.resetSetItem('userName', _this.loginForm.name) this.resetSetItem('password', _this.loginForm.password)
‘userName’为获取共享数据的key值,_this.loginForm.name为存入的数据。
2、在main.js文件中编写以下代码:
Vue.prototype.resetSetItem = function (key, newVal) {
// 可通过key值做判断对数据进行过滤 // 创建一个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) }
3、在生命周期created中监听数据
created() { window.addEventListener('setItem', ()=> { console.log(sessionStorage.getItem('userName')) } } }