在开发过程中,组件中的随时可能改变的数据有的是缓存到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. web框架-(四)Django进阶之数据库对象关系映射

    Django ORM基本配置 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去 ...

  2. GUI学习之二十——QAbstractSlider学习总结

    今天学习一种全新的输入控件——QAbstractSlider()滑块控件的基础控件. 一.描述: QAbstractSlider()是QWidget()的子类,提供了一个范围内的整数值.它是QSlid ...

  3. IDEA设置类和方法的注释

    类注释 #if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")package ${PACKAGE_NAME};#end #pa ...

  4. NOIP2019(CSP2019) 游记

    NOIP2019(CSP2019) 游记 近一年的似乎也就是感觉比别的学校的同学水平低的不止一点,到现在也没有搞清楚大概应该怎么科学有效的练习,并不会思考"为什么想不到"和&quo ...

  5. vertica merge 优化

    -- 查看RDS的订单数(MySQL) select count(*) from  (   SELECT   tid,    IF(LOCATE('pay_time', jdp_response)=0 ...

  6. java(jdk8)死锁案例

    package testSynchorized; public class SynchronizedDeadLockTest { static Object src1 = new Object(); ...

  7. 去掉html中的标签

    //去掉html中的图片 String regEx_image = "(<img.*src\\s*=\\s*(.*?)[^>]*?>)"; Pattern p_s ...

  8. linux运维、架构之路-CentOS6.9安装Zabbix3.4.1

    一.LAMP环境安装 1.环境 [root@m01 ~]# cat /etc/redhat-release CentOS release 6.9 (Final) [root@m01 ~]# uname ...

  9. 863D - Yet Another Array Queries Problem(思维)

    原题连接:http://codeforces.com/problemset/problem/863/D 题意:对a数列有两种操作: 1 l r ,[l, r] 区间的数字滚动,即a[i+1]=a[i] ...

  10. 区间查询异或最大值——cf1100F,hdu6579

    cf1100F是静态区间查询最大值,有离线的解法,我感觉线段树或者莫队应该都能过 更优秀的解法可以在线并支持修改,可以解决hdu6579,即依次插入每个数,pos[i][j]表示在插第i个数时第j个基 ...