详解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 相关文章推荐
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
解读ES6中class关键字
2017/11/20 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
python 字符串格式化代码
2013/03/17 Python
python学习数据结构实例代码
2015/05/11 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
解读! Python在人工智能中的作用
2017/11/14 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
教师个人鉴定材料
2014/02/08 职场文书
出纳员岗位责任制
2014/02/11 职场文书
会计助理岗位职责
2014/02/17 职场文书
班长竞选演讲稿
2014/04/24 职场文书
对教师的评语
2014/04/28 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
农村老人去世追悼词
2015/06/23 职场文书