详解vuex结合localstorage动态监听storage的变化


Posted in Javascript onMay 03, 2018

需求:不同组件间共用同一数据,当一个组件将数据发生变化时,其他组件也可以响应该变化。

分析:vue无法监听localstorage的变化。localstorage主要用于不同页面间传值,vue适合组件间传值。对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据(vuex在页面刷新的时候存储的值会丢失,localstorage存储在本地浏览器中),可以采用vuex+localstorage的方式。

关于vuex和storage的区别

1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地

2.应用场景:vuex用于组件之间的传值,localstorage则主要用于不同页面之间的传值。

3.永久性:当刷新页面时vuex存储的值会丢失,localstorage不会。

注:很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage无法做到,原因就是区别1。

关于vuex参考文档:http://vuex.vuejs.org/zh-cn/index.html

实现过程:以首页展示用户头像信息,修改个人信息在公共组件头部组件中为例,当用户修改个人信息时首页的图片实时变化,如果不对头像信息做存储更新,每次用户修改完只有刷新页面或者从其他页面返回回来才能看到变化,即新设置的头像信息,仅展示核心代码。

1.首先先定义一个变量在state中。State负责存储整个应用的状态数据,后期就可以使用this.$store.state直接获取状态。也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去。

const state = {
 imgInfo:null //首页头像信息

}

2.mutations里面存储localstorage的信息。Mutations可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值state。定义的mutation必须是同步函数。this.$store.commit(mutationName)是用来触发一个mutation的方法,或者使用辅助函数mapMutations直接将触发函数映射到methods上,这样就能在元素事件绑定上直接使用了。

export const SETIMGINFO = 'SETIMGINFO'
[SETIMGINFO] (state,info) {
 state.imgInfo=info
 localStorage.setItem('imgInfo',info)
 }

3.getter里面获取localstorage的信息。有些状态需要做二次处理,就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

getImgInfo(state){
  if(localStorage.getItem('imgInfo')){
  state.imgInfo=localStorage.getItem('imgInfo')
  }
  return state.imgInfo
 }

4.在需要对storage进行操作的页面引用mapMutations函数

import {mapMutations} from 'vuex' //引入mapMutations
 ...mapMutations([      
  'SETIMGINFO'
  ]),
this.SETIMGINFO(this.imgInfo) 
 //在需要的地方引用 mutations里面定义的方法

5.在需要获取storage信息的页面引用mapGetters辅助函数

import {mapGetters} from 'vuex'
computed:{
  ...mapGetters([   
  'getImgInfo'
  ])
 },
watch:{ //动态监听state的变化,实时改变页面的数据
  getImgInfo: function(li) { //li就是改变后的state里面的imgInfo
  let vm = this;
   this.imgInfo=li //data声明一个变量,在html引用。如果storage的值发生变化就实时刷新变量的值。
  }
 },

6.模板中对vuex的值的引用

<img :src="imgInfo?imgInfo:info.avatar"> 
//三元不等式,如果state发生变化有值就赋值给img标签,如果没有即刚进页面就赋值给create生命周期函数中从接口读出来的数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
利用python分析access日志的方法
Oct 26 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
JavaScript 下载svg图片为png格式
Jun 21 Javascript
redux.js详解及基本使用
May 24 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 #Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 #Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 #Javascript
Angular学习教程之RouterLink花式跳转
May 03 #Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 #Javascript
Vue表单类的父子组件数据传递示例
May 03 #Javascript
Webpack path与publicPath的区别详解
May 03 #Javascript
You might like
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python实现识别手写数字大纲
2018/01/29 Python
python3中的md5加密实例
2018/05/29 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
keras中的backend.clip用法
2020/05/22 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Django URL参数Template反向解析
2020/11/24 Python
趣味游戏活动方案
2014/02/07 职场文书
卫生巾广告词
2014/03/18 职场文书
正规欠条模板
2015/07/03 职场文书
运动会加油稿
2015/07/22 职场文书
企业法律事务工作总结
2015/08/11 职场文书
2016年国培研修日志
2015/11/13 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
Redis keys命令的具体使用
2022/06/05 Redis