详解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 相关文章推荐
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
Vue.js实现可编辑的表格
Dec 11 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
详解Vue之计算属性
Jun 20 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
php通过字符串调用函数示例
2014/03/02 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
php给数组赋值的实例方法
2019/09/26 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
利用python开发app实战的方法
2019/07/09 Python
python实现门限回归方式
2020/02/29 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
Python如何定义有默认参数的函数
2020/08/10 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
自行车广告词大全
2014/03/21 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2014年信用社工作总结
2014/11/25 职场文书
老公婚前保证书
2015/02/28 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
小兵张嘎观后感
2015/06/03 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
Python实现数据的序列化操作详解
2022/07/07 Python