在开发过程中,组件中的随时可能改变的数据有的是缓存到sessionStorage里面的,但是有些组件取seesionStorage中的值时,并不能取到更新后的值。

接下来就说一下,当seesionStorage的值发生改变时,如何实现组件中的seesionStorage的值实时更新 ,也就是seesionStorage的“响应式”

  1、首先在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);
   }
}

  2、如何触发?
    在一个路由(比如路由A)存储值得时候,使用下面的方法:

this.resetSetItem('watchStorage', this.value);

  3、如何监听
    如果在另外一个路由(比如路由B)中,我们想根据watchStorage的变化来请求接口刷新页面数据的时候,可以在这个路由中created钩子函数中监听

window.addEventListener('setItem', ()=> {
    this.newVal = sessionStorage.getItem('watchStorage');
})

  

Vue ----》 如何实现 sessionStorage 的监听,实现数据响应式的更多相关文章

  1. proxy写监听方法,实现响应式

    var data = { price: 5, quantity: 2 };var data_without_proxy = data; // 保存源对象data = new Proxy(data_wi ...

  2. js监听rem实现响应式

    原文链接:http://caibaojian.com/web-app-rem.html (function (doc, win) { var docEl = doc.documentElement, ...

  3. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  4. vue使用element-ui的el-input监听不了回车事件解决

    vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...

  5. vue使用element-ui的el-input监听不了键盘事件解决

    vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...

  6. vue 如何在循环中 "监听" 的绑定v-model数据

    vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...

  7. vue解惑之v-on(事件监听指令)

    一.v-on指令 vue中用v-on指令来监听DOM事件,并触发相应的代码.比如v-on:click,表示监听了点击事件. 二.事件修饰符 在事件处理函数中调用 event.preventDefaul ...

  8. vue学习-day05 -- 案例:名字合并(监听data数据的改变)

    1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...

  9. 浅谈VUE,使用watch方法监听父组件传到子组件的数据。

    props:['updateData'], data(){ return{ form: { _name:'', }, } }, 第一步接收数据: props:['updateData']   第二步动 ...

  10. 从Wireshark监听的数据中提取需要的数据

    最近,需要将wireshark监听的数据进行提取,分两步:首先,应该得出wireshark的数据包吧,在图形化界面中可以非常直观的将监听数据进行存储,但是这样需要手动操作非常麻烦,而且容易出错(随着处 ...

随机推荐

  1. 375-基于TI DSP TMS320C6657、XC7K325T的高速数据处理核心板

    基于TI DSP TMS320C6657.XC7K325T的高速数据处理核心板 一.板卡概述    该DSP+FPGA高速信号采集处理板由我公司自主研发,包含一片TI DSP TMS320C6657和 ...

  2. 006-(成功环境记录)基于Centos7系统部署cobbler批量安装系统

    1.1 cobbler简介 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等. Cobbler可以使 ...

  3. 手写与copy

    m_Font.CreateFont( 14, // 字体高度 0 , // 宽度由系统确定 0 , // 文本不倾斜 0 , // 字体不倾斜 FW_NORMAL, // 字体粗度 0 , // 非斜 ...

  4. c调用c++

    g++ main.c math.cpp math.h中加入extern "C"

  5. ubuntu16.04下docker安装和简单使用(转)

    ubuntu16.04下docker安装和简单使用   转自:https://www.cnblogs.com/hupeng1234/p/9773770.html 前提条件 操作系统 docker-ce ...

  6. hadoop单机 搭建

    jdk环境变量配置 下载hadoop 配置hadoop环境变量 修改hadoop 的三个配置文件:sore-site.env.hsfs-site 初始化 启动 jps查看有三个:namenode.da ...

  7. man diff

    DIFF(1)                            GNU Tools                           DIFF(1) NAME/名称       diff - ...

  8. PHP入门培训教程 php动态网页怎么转换成html

       当动态网页遇上搜索引擎 虽然动态网页相比于静态页面拥有许多优势,但它在搜索引擎的检索上却碰了个大钉子.无论任何一家网站,尤其是那些以营销为目的的企业网站,没有谁会希望自己的网页无法被搜索引擎检索 ...

  9. Nginx 作为代理服务与负载均衡

    代理服务 代理一代为办理(代理理财.代理收货等等) 代理区别 区别在于代理的对象不一样 正向代理代理的对象是客户端 反向代理代理的对象是服务端 反向代理配置 server { listen 80; s ...

  10. 封装通用的 ajax, 基于 jQuery。

    在前端异步获取数据时候每次都是使用 ajax:为了通用性更好,然而封装通用的 ajax 是一个一劳永逸的办法. 本次基于 jQuery 封装实现: 第一步: 引入 jQuery: <script ...