vue项目中监听sessionStorage值发生变化
首先在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);
}
}
如何触发
在一个路由(比如路由A)存储值得时候,使用下面的方法:
this.resetSetItem('watchStorage', 11111);
如何监听
如果在另外一个路由(比如路由B)中,我们想根据watchStorage的变化来请求接口刷新页面数据的时候,可以在这个路由中created钩子函数中监听:
window.addEventListener('setItem', ()=> {
this.newVal = sessionStorage.getItem('watchStorage');
})
————————————————
vue项目中监听sessionStorage值发生变化的更多相关文章
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- 原生js监听input值发生变化
原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...
- vue项目如何监听窗口变化,达到页面自适应?
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 在vue中监听storage的变化
1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
- vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- Vue 为什么在 HTML 中监听事件?
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
随机推荐
- 2D轮播图
目录结构 index.html <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- Tomcat轻量级web服务器
1.三种web服务器 apache: 动态网站 nginx: 静态网站 tomcat:java开发的程序 2.tomcat安装 官网下载安装包(tomcat 9) 解压并放在/usr/local下 c ...
- sql语言(mysql)
一.SQL语言 1.DDL (Data Definition Language) 数据库定义语言 2.DML(Data Manipulation Language) 数据库操作语言 3.DQL (Da ...
- lua基础学习(一)
设计目的: 为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. 特性: 1.编译之后仅仅100k,可以很方便嵌入别的程序里. 2.可扩张性,Lua提供了非常易于使用的扩展接口和机制:由宿 ...
- docker mysql 容器报too many connections 引发的liunx磁盘扩容操作
症状每次删除mysql容器重启没两分钟又报标题错 df -h 命令查看各个挂载空间应用情况发现root home var 三个文件目录挂载的空间满了 网上百度了一下liunx磁盘扩容操作,fdisk ...
- 使用graphics.h来绘制图形
| 版权声明:本文为博主原创文章,未经博主允许不得转载. graphics.h是TC里面的图形库,如果要用的话应该用TC来编译.分为:像素函数.直线和线型函数.多边形函数.填充函数等.然而在我们使 ...
- (4.34)sql server窗口函数
关键词:sql server窗口函数,窗口函数,分析函数 如果分析函数不可用,那么可能是版本还不支持 Window Function 包含了 4 个大类.分别是: 1 - Rank Function ...
- for循环语句的用法
1.for(int i : index){}用法[又称是foreach用法]: 比如: public class Test { public static void main(String[] arg ...
- set的常见用法
set的使用 set是什么 set是一个内部有序且不含重复元素的容器 用处 *使得元素自动有序 *去除重复元素 set的引入 # include <set> using namespace ...
- BZOJ 1053 反素数 题解
题面 引理1: 1~n中的最大反质数,就是1~n中约数个数最多的数中最小的一个(因为要严格保证g(x)>g(i)): 引理2:1~n中任何数的不同因子不会超过10个,因为他们的乘积大于2,00 ...