Vue ----》 如何实现 sessionStorage 的监听,实现数据响应式
在开发过程中,组件中的随时可能改变的数据有的是缓存到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 的监听,实现数据响应式的更多相关文章
- proxy写监听方法,实现响应式
var data = { price: 5, quantity: 2 };var data_without_proxy = data; // 保存源对象data = new Proxy(data_wi ...
- js监听rem实现响应式
原文链接:http://caibaojian.com/web-app-rem.html (function (doc, win) { var docEl = doc.documentElement, ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- vue使用element-ui的el-input监听不了回车事件解决
vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...
- vue使用element-ui的el-input监听不了键盘事件解决
vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...
- vue 如何在循环中 "监听" 的绑定v-model数据
vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...
- vue解惑之v-on(事件监听指令)
一.v-on指令 vue中用v-on指令来监听DOM事件,并触发相应的代码.比如v-on:click,表示监听了点击事件. 二.事件修饰符 在事件处理函数中调用 event.preventDefaul ...
- vue学习-day05 -- 案例:名字合并(监听data数据的改变)
1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...
- 浅谈VUE,使用watch方法监听父组件传到子组件的数据。
props:['updateData'], data(){ return{ form: { _name:'', }, } }, 第一步接收数据: props:['updateData'] 第二步动 ...
- 从Wireshark监听的数据中提取需要的数据
最近,需要将wireshark监听的数据进行提取,分两步:首先,应该得出wireshark的数据包吧,在图形化界面中可以非常直观的将监听数据进行存储,但是这样需要手动操作非常麻烦,而且容易出错(随着处 ...
随机推荐
- 375-基于TI DSP TMS320C6657、XC7K325T的高速数据处理核心板
基于TI DSP TMS320C6657.XC7K325T的高速数据处理核心板 一.板卡概述 该DSP+FPGA高速信号采集处理板由我公司自主研发,包含一片TI DSP TMS320C6657和 ...
- 006-(成功环境记录)基于Centos7系统部署cobbler批量安装系统
1.1 cobbler简介 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等. Cobbler可以使 ...
- 手写与copy
m_Font.CreateFont( 14, // 字体高度 0 , // 宽度由系统确定 0 , // 文本不倾斜 0 , // 字体不倾斜 FW_NORMAL, // 字体粗度 0 , // 非斜 ...
- c调用c++
g++ main.c math.cpp math.h中加入extern "C"
- ubuntu16.04下docker安装和简单使用(转)
ubuntu16.04下docker安装和简单使用 转自:https://www.cnblogs.com/hupeng1234/p/9773770.html 前提条件 操作系统 docker-ce ...
- hadoop单机 搭建
jdk环境变量配置 下载hadoop 配置hadoop环境变量 修改hadoop 的三个配置文件:sore-site.env.hsfs-site 初始化 启动 jps查看有三个:namenode.da ...
- man diff
DIFF(1) GNU Tools DIFF(1) NAME/名称 diff - ...
- PHP入门培训教程 php动态网页怎么转换成html
当动态网页遇上搜索引擎 虽然动态网页相比于静态页面拥有许多优势,但它在搜索引擎的检索上却碰了个大钉子.无论任何一家网站,尤其是那些以营销为目的的企业网站,没有谁会希望自己的网页无法被搜索引擎检索 ...
- Nginx 作为代理服务与负载均衡
代理服务 代理一代为办理(代理理财.代理收货等等) 代理区别 区别在于代理的对象不一样 正向代理代理的对象是客户端 反向代理代理的对象是服务端 反向代理配置 server { listen 80; s ...
- 封装通用的 ajax, 基于 jQuery。
在前端异步获取数据时候每次都是使用 ajax:为了通用性更好,然而封装通用的 ajax 是一个一劳永逸的办法. 本次基于 jQuery 封装实现: 第一步: 引入 jQuery: <script ...