vuex是状态管理,是为了解决跨组件之间数据共享问题的,一个组件的数据变化会映射到使用这个数据的其他组件当中。如果刷新页面,之前存储的vuex数据全部都会被初始化掉。

localStorage是H5提供的一个更简单的数据存储方式,之前是用cookie存放数据,但是cookie的数据量太小,所以就用localStorage,它可以有5M的限制,不受刷新页面的控制,长久保存。

所以,在用vue进行项目开发的时候,什么时候用到vuex呢?

当应用遇到多个组件共享状态时候,即:多个视图依赖于同一个状态,不同视图的行为需要变更同一状态。

vuex的官网也说了,对于页面之间的传参对于多层嵌套组件将会很繁琐,而且对于兄弟组件之间的状态传递无能为力。所以就将这些组件的共享状态抽取出来,以一个全局单例模式管理,即vuex。

vuex和全局变量的区别:

1,【响应式】vuex的状态存储是响应式的,当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效更新。

2,【不能直接改变store】不能直接改变store的变化,改变store中状态的唯一途径是commit mutation。方便于跟踪每一个状态的变化。

vuex和localStorage,全局变量的区别的更多相关文章

  1. vuex和localStorage的存储区别

    vuex中的数据是存储在内存中的,localStorage中的数据是存储在浏览器的application中的

  2. vuex和浏览器【sessionStorage,localStorage ..】 得区别

    1.Vuex的主要作用是用来共享和管理数据,那为什么不直接使用浏览器缓存呢?2.Vuex和浏览器缓存策略的根本区别是什么?3.Vuex,state仓库中的数据流是单向同步的,那为什么可以在action ...

  3. 详解vuex结合localstorage动态监听storage的变化

    这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...

  4. localStorage与sessionStorage区别

    localStorage与sessionStorage区别:浏览器正常模式下:    关闭浏览器或该窗口标签时,localStorage数据依然保存,但是sessionStorage数据会被清除.   ...

  5. c 语言中宏定义和定义全局变量的区别

    宏定义和定义全局变量的区别: 1 作用时间不同. 宏定义在编译期间即会使用并替换,而全局变量要到运行时才可以. 2 本质类型不同. 宏定义的只是一段字符,在编译的时候被替换到引用的位置.在运行中是没有 ...

  6. static全局变量与普通全局变量的区别,static局部变量与普通局部变量的区别,static函数与普通函数的区别

    static全局变量与普通全局变量的区别 static全局变量和普通全局变量的存储方式没有不同,如果它们都已经初始化,那么存放在进程的数据段中,否则存放在bss段.这两者的不同点在于作用域不同,当一个 ...

  7. vuex和localStorage/sessionStorage 区别

    1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地 2.应用场景:vuex用于组件之间的传值,(响应式的),localstorage则主要用于不同页面之间的传值(其 ...

  8. vuex、localStorage、sessionStorage之间的区别

    vuex存储在内存中,localStorage以文件形式存储在本地,sessionStorage针对一个session(阶段)进行数据存储. 当页面刷新时vuex存储的数据会被清除,localStor ...

  9. cookie、 sessionStorage 、localStorage之间的区别和使用

    1.cookie:存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密.一般应用最典型的案列就是判断注册用户是否 ...

随机推荐

  1. EXAM-2018-8-3

    EXAM-2018-8-3 D H 喜闻乐见的水题 J lower_bound + upper_bound 一个可以查找第一个大于,另一个可查找第一个不小于. F 找规律+奇偶分析 偶数好找,就是奇数 ...

  2. surprise库使用

    自动交叉使用法 #-*- coding:utf-8 -*- from surprise import SVD from surprise import Dataset from surprise.mo ...

  3. 高可用性的mongo集群搭建

    mongoDB安装 参照:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 配置yum管理包 在路径/etc/y ...

  4. 量化预测质量之分类报告 sklearn.metrics.classification_report

    classification_report的调用为:classification_report(y_true, y_pred, labels=None, target_names=None, samp ...

  5. Google DevTools Explanation

    Evaluating network performance The Network panel records information about each network operation in ...

  6. Qt LNK1158无法运行rc.exe解决办法

    找出电脑上的rc.exe ,发现在C:\Program Files (x86)\Windows Kits\10\bin\10.0.xxxx.0\x86 路径下. 找出电脑上的rc.exe ,发现在C: ...

  7. bootstrap 和datapicker 样式不兼容修复

    修改 datepicker.js内的 layout 方法 function(el) { var options = $(el).data('datepicker'); var cal = $('#' ...

  8. practically|exclamation|defy|thrilled|

    ADV 简直:几乎Practically means almost, but not completely or exactly. He'd known the old man practically ...

  9. JS实现select去除option的使用注意事项

    网上讲JS动态添加option和删除option的文章很多,在此推荐一篇: http://www.jb51.net/article/35205.htm 我使用的是如下方法: function remo ...

  10. js 实现排序算法 -- 归并排序(Merge Sort)

    原文: 十大经典排序算法(动图演示) 归并排序 归并排序是建立在归并操作上的一种有效的排序算法.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得 ...