首先在main.js中给Vue.protorype注册一个全局方法,

其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,

然后创建一个StorageEvent方法,当我在执行sessionStorage.setItem(k, val)这句话的时候,初始化事件,并派发事件。

  1. Vue.prototype.resetSetItem = function (key, newVal) {
  2. if (key === 'watchStorage') {
  3.  
  4. // 创建一个StorageEvent事件
  5. var newStorageEvent = document.createEvent('StorageEvent');
  6. const storage = {
  7. setItem: function (k, val) {
  8. sessionStorage.setItem(k, val);
  9.  
  10. // 初始化创建的事件
  11. newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
  12.  
  13. // 派发对象
  14. window.dispatchEvent(newStorageEvent)
  15. }
  16. }
  17. return storage.setItem(key, newVal);
  18. }
  19. }
  1. 如何触发
  2. 在一个路由(比如路由A)存储值得时候,使用下面的方法:
  3. this.resetSetItem('watchStorage', 11111);
  1. 如何监听
  2. 如果在另外一个路由(比如路由B)中,我们想根据watchStorage的变化来请求接口刷新页面数据的时候,可以在这个路由中created钩子函数中监听:
  3. window.addEventListener('setItem', ()=> {
  4. this.newVal = sessionStorage.getItem('watchStorage');
  5. })
  6. ————————————————

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. lua基础学习(四)

    一,lua字符串   单引号间的一串字符. 双引号间的一串字符. [[和]]间的一串字符.   1.几个常用的转义字符 \b 退格 \f 换页 \n 换行 \r 回车 \t 跳到下一个tab位置 \0 ...

  2. 数组被遗忘的内置对象--》Array.find()

    需求:一个数组包含很多对象,对象中有很多属性.现在给你一个值,且这个值再这个数组的某个对象存在,那么如何找到这个对象? 首先想的是for循环遍历,但这样非常麻烦,js给我们提供了一个find()方法, ...

  3. java中变量的线程安全性

    静态变量:线程非安全.静态变量即类变量,位于方法区,为所有对象共享,共享一份内存,一旦静态变量被修改,其他对象均对修改可见,故线程非安全.实例变量:单例模式(只有一个对象实例存在)线程非安全,非单例线 ...

  4. python 并发编程 多线程 开启线程的两种方式

    一 threading模块介绍 multiprocess模块的完全模仿了threading模块的接口,二者在使用层面,有很大的相似性 二 开启线程的两种方式 第一种 每造一个进程,默认有一个线程,就是 ...

  5. 交换机安全学习笔记 第六章 IPV4 ARP攻击

    ARP欺骗攻击 常用工具:  dsniff(Linux/windows).ettercap(Linux/windows).cain(仅windows). ARP欺骗攻击的目的是嗅探发往某主机的所有IP ...

  6. PTA(Basic Level)1008.数组元素循环右移问题

    一个数组A中存有N(>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥0)个位置,即将A中的数据由(A0A1⋯AN−1)变换为(AN−M⋯AN−1A0A1⋯AN−M−1)(最 ...

  7. os.path路径拓展 python3

    os.path-对路径path进行的操作 在调用os.path时, 根据操作系统的不同 程序会选择使用posixpath.py或ntpath.py(由os中的代码实现). 对文件命名时应当使用unic ...

  8. zookeeper 实战操作

    一:监听服务端zookeeper节点数据改变 import java.io.IOException; import java.util.concurrent.CountDownLatch; impor ...

  9. python2.7.5升级到2.7.14或者直接升级到3.6.4

    python2.7.5升级到2.7.14 1.安装升级GCC yum install -y gcc* openssl openssl-devel ncurses-devel.x86_64  bzip2 ...

  10. CSS 相对定位 绝对定位

    css中的相对定位和绝对定位. 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将 ...