首先在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值发生变化的更多相关文章

  1. vue mounted中监听div的变化

    vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...

  2. 原生js监听input值发生变化

    原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...

  3. vue项目如何监听窗口变化,达到页面自适应?

    [自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...

  4. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  5. 在vue中监听storage的变化

    1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...

  6. vue中监听路由参数的变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  7. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

  8. Vue跨路由触发事件,Vue监听sessionStorage

    近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...

  9. Vue 为什么在 HTML 中监听事件?

    为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...

随机推荐

  1. 2D轮播图

    目录结构 index.html <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  2. Tomcat轻量级web服务器

    1.三种web服务器 apache: 动态网站 nginx: 静态网站 tomcat:java开发的程序 2.tomcat安装 官网下载安装包(tomcat 9) 解压并放在/usr/local下 c ...

  3. sql语言(mysql)

    一.SQL语言 1.DDL (Data Definition Language) 数据库定义语言 2.DML(Data Manipulation Language) 数据库操作语言 3.DQL (Da ...

  4. lua基础学习(一)

    设计目的: 为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能.   特性: 1.编译之后仅仅100k,可以很方便嵌入别的程序里. 2.可扩张性,Lua提供了非常易于使用的扩展接口和机制:由宿 ...

  5. docker mysql 容器报too many connections 引发的liunx磁盘扩容操作

    症状每次删除mysql容器重启没两分钟又报标题错 df -h 命令查看各个挂载空间应用情况发现root home var 三个文件目录挂载的空间满了 网上百度了一下liunx磁盘扩容操作,fdisk ...

  6. 使用graphics.h来绘制图形

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. graphics.h是TC里面的图形库,如果要用的话应该用TC来编译.分为:像素函数.直线和线型函数.多边形函数.填充函数等.然而在我们使 ...

  7. (4.34)sql server窗口函数

    关键词:sql server窗口函数,窗口函数,分析函数 如果分析函数不可用,那么可能是版本还不支持 Window Function 包含了 4 个大类.分别是: 1 - Rank Function ...

  8. for循环语句的用法

    1.for(int i : index){}用法[又称是foreach用法]: 比如: public class Test { public static void main(String[] arg ...

  9. set的常见用法

    set的使用 set是什么 set是一个内部有序且不含重复元素的容器 用处 *使得元素自动有序 *去除重复元素 set的引入 # include <set> using namespace ...

  10. BZOJ 1053 反素数 题解

    题面 引理1:  1~n中的最大反质数,就是1~n中约数个数最多的数中最小的一个(因为要严格保证g(x)>g(i)): 引理2:1~n中任何数的不同因子不会超过10个,因为他们的乘积大于2,00 ...