详解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写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 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
资料注册后发信小技巧
2006/10/09 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
Python中装饰器的一个妙用
2015/02/08 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
python中私有函数调用方法解密
2016/04/29 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
python绘制直线的方法
2018/06/30 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
python 利用zmail库发送邮件
2020/09/11 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
如何利用find命令查找文件
2015/02/07 面试题
团支书竞选演讲稿
2014/04/28 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
大学学生个人总结
2015/02/15 职场文书
感恩教育观后感
2015/06/17 职场文书
保护环境建议书作文500字
2015/09/14 职场文书