这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求:不同组件间共用同一数据,当一个组件将数据发生变化时,其他组件也可以响应该变化。

分析: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映射到计算属性中去。

1
2
3
4
const state = {
 imgInfo:null //首页头像信息
 
}

2.mutations里面存储localstorage的信息。Mutations可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值state。定义的mutation必须是同步函数。this.$store.commit(mutationName)是用来触发一个mutation的方法,或者使用辅助函数mapMutations直接将触发函数映射到methods上,这样就能在元素事件绑定上直接使用了。

1
2
3
4
5
export const SETIMGINFO = 'SETIMGINFO'
[SETIMGINFO] (state,info) {
 state.imgInfo=info
 localStorage.setItem('imgInfo',info)
 }

3.getter里面获取localstorage的信息。有些状态需要做二次处理,就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

1
2
3
4
5
6
getImgInfo(state){
  if(localStorage.getItem('imgInfo')){
  state.imgInfo=localStorage.getItem('imgInfo')
  }
  return state.imgInfo
 }

4.在需要对storage进行操作的页面引用mapMutations函数

1
2
3
4
5
6
import {mapMutations} from 'vuex' //引入mapMutations
 ...mapMutations([     
  'SETIMGINFO'
  ]),
this.SETIMGINFO(this.imgInfo)
 //在需要的地方引用 mutations里面定义的方法

5.在需要获取storage信息的页面引用mapGetters辅助函数

1
2
3
4
5
6
7
8
9
10
11
12
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的值的引用

1
2
<img :src="imgInfo?imgInfo:info.avatar">
//三元不等式,如果state发生变化有值就赋值给img标签,如果没有即刚进页面就赋值给create生命周期函数中从接口读出来的数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

详解vuex结合localstorage动态监听storage的变化的更多相关文章

  1. 在vue中监听storage的变化

    1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...

  2. HTML5 oninput实时监听输入框值变化的完美方案

    在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...

  3. input 即时搜索 监听输入值的变化

    在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理 ...

  4. 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm

  5. oracle静态与动态监听

    在运行lsnrctl命令的status时,常会看到如下返回值: 服务“test”包含1个例程.    例程"mydata",状态 UNKOWN,包含此服务的一个处理程序... 服务 ...

  6. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

  7. 腾讯技术分享:GIF动图技术详解及手机QQ动态表情压缩技术实践

    本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦.” 1.GIF格式的历史 GIF ( Gr ...

  8. JS 详解 Cookie、 LocalStorage 与 SessionStorage-转载

    记录一下这些知识,有时候用到会忘记,对原文作者表达感谢. 附上原文链接:JS 详解 Cookie. LocalStorage 与 SessionStorage 基本概念 Cookie Cookie 是 ...

  9. ORACLE动态监听

    动态监听的原理 pmon在数据库启动到mount或open时,动态从参数文件中读取service_names值.service_names可以为多值(可以有64个,其中包括两个系统的).  servi ...

随机推荐

  1. CSDN新版Markdown编辑器(Alpha 2.0版)使用示例(文首附源码.md文件)

    CSDN新版Markdown编辑器(Alpha 2.0版) 使用示例 附 本文的Markdown源码: https://github.com/yanglr/AlgoSolutions/blob/mas ...

  2. java 取汉字首字母

    有时候,可能会有一些类似这样的需求: 对于这样的效果,我们可以有类似这样的解决方案: package bys.utils; import java.io.UnsupportedEncodingExce ...

  3. python:pip命令使用

    pip命令安装库  pip install 库名 使用pip命令更新库 pip install --upgrade 库名 比如更新scikit-learn包 pip install --upgrade ...

  4. 【Java资源免费分享,网盘自己拿】

    JavaSE: Java马士兵:链接:https://pan.baidu.com/s/1jJRvxGi密码:v3xb Java毕向东:链接:https://pan.baidu.com/s/1ggzHk ...

  5. 如何快速打造一款高清又极速的短视频APP?

    整个短视频的市场规模一直在增长,网络数据显示2018年已经突破100亿大关,在2019年预测将超过200亿.纵观行业,在生活资讯.美食.搞笑.游戏.美妆等领域,短视频流量巨大但竞争激烈,但是在教育.财 ...

  6. linux rsync 实际应用

    linux rsync 实际应用 一.rsync的概述 rsync是类unix系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.rsync是Linux系统下的文件同步和 ...

  7. eclipse svn插件卸载 重新安装 Subclipse卸载安装 The project was not built since its build path is incomplete This client is too old to work with the working copy at

    安装插件的原则就是,要按照规则,插件与本地的svn版本要一致, 这样子本地和eclipse上面就可以无缝使用,不会出现问题 1.卸载eclipse  svn插件 2,安装新版的svn插件 2.1,下载 ...

  8. 基于.Net进行前端开发的技术栈发展路线(三)

    前言 上一篇<我的技能树二>文章分享了我的技能中的前端技能和Java技能,今天继续跟大家分享的就是后端技能了. 我的技能树 我当前的技能树: 其中,标注为黄色旗帜的是基本掌握,标注为红色旗 ...

  9. Java开发笔记(七十四)内存溢出的两种错误

    前面介绍的几种异常,其实都存在这样那样的逻辑问题,属于程序员的编码手误.还有一大类系统错误,表面上看不出什么问题,但是程序仍然运行不下去,兹举二例说明.第一个例子且看下列的测试代码: // 测试内存溢 ...

  10. Java 使用Arrays.sort排序 从大到小排列

    前言 一般情况,我们在Java中给数组排序,比起自己写个冒泡排序,更加喜欢使用Java中自带的sort方法,也就是Arrays.sort方法 但是,这个方法只会将数组从小到大排列,如果我们需要从大到小 ...