详解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 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
Javascript进制转换实例分析
May 14 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
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
PHP编程网上资源导航
2006/10/09 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python列表切片常用操作实例解析
2019/12/16 Python
如何基于python操作excel并获取内容
2019/12/24 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
支教自我鉴定
2014/01/18 职场文书
教师旷工检讨书
2014/01/18 职场文书
司机辞职报告范文
2014/01/20 职场文书
买房委托公证书
2014/04/08 职场文书
好学生评语大全
2014/05/05 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
求职信名称怎么写
2014/05/26 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
Python图片检索之以图搜图
2021/05/31 Python
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫