详解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判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
Nuxt.js实战和配置详解
Aug 05 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
php生成excel文件的简单方法
2014/02/08 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
ArrayList类(增强版)
2007/04/04 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
Python生成pdf文件的方法
2014/08/04 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Python如何对XML 解析
2020/06/28 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
自我鉴定范文200字
2013/10/02 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
小学生教师节广播稿
2015/08/19 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
Python实现双向链表
2022/05/25 Python