vuex和localStorage,全局变量的区别
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,全局变量的区别的更多相关文章
- vuex和localStorage的存储区别
vuex中的数据是存储在内存中的,localStorage中的数据是存储在浏览器的application中的
- vuex和浏览器【sessionStorage,localStorage ..】 得区别
1.Vuex的主要作用是用来共享和管理数据,那为什么不直接使用浏览器缓存呢?2.Vuex和浏览器缓存策略的根本区别是什么?3.Vuex,state仓库中的数据流是单向同步的,那为什么可以在action ...
- 详解vuex结合localstorage动态监听storage的变化
这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...
- localStorage与sessionStorage区别
localStorage与sessionStorage区别:浏览器正常模式下: 关闭浏览器或该窗口标签时,localStorage数据依然保存,但是sessionStorage数据会被清除. ...
- c 语言中宏定义和定义全局变量的区别
宏定义和定义全局变量的区别: 1 作用时间不同. 宏定义在编译期间即会使用并替换,而全局变量要到运行时才可以. 2 本质类型不同. 宏定义的只是一段字符,在编译的时候被替换到引用的位置.在运行中是没有 ...
- static全局变量与普通全局变量的区别,static局部变量与普通局部变量的区别,static函数与普通函数的区别
static全局变量与普通全局变量的区别 static全局变量和普通全局变量的存储方式没有不同,如果它们都已经初始化,那么存放在进程的数据段中,否则存放在bss段.这两者的不同点在于作用域不同,当一个 ...
- vuex和localStorage/sessionStorage 区别
1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地 2.应用场景:vuex用于组件之间的传值,(响应式的),localstorage则主要用于不同页面之间的传值(其 ...
- vuex、localStorage、sessionStorage之间的区别
vuex存储在内存中,localStorage以文件形式存储在本地,sessionStorage针对一个session(阶段)进行数据存储. 当页面刷新时vuex存储的数据会被清除,localStor ...
- cookie、 sessionStorage 、localStorage之间的区别和使用
1.cookie:存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密.一般应用最典型的案列就是判断注册用户是否 ...
随机推荐
- EXAM-2018-8-3
EXAM-2018-8-3 D H 喜闻乐见的水题 J lower_bound + upper_bound 一个可以查找第一个大于,另一个可查找第一个不小于. F 找规律+奇偶分析 偶数好找,就是奇数 ...
- surprise库使用
自动交叉使用法 #-*- coding:utf-8 -*- from surprise import SVD from surprise import Dataset from surprise.mo ...
- 高可用性的mongo集群搭建
mongoDB安装 参照:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 配置yum管理包 在路径/etc/y ...
- 量化预测质量之分类报告 sklearn.metrics.classification_report
classification_report的调用为:classification_report(y_true, y_pred, labels=None, target_names=None, samp ...
- Google DevTools Explanation
Evaluating network performance The Network panel records information about each network operation in ...
- Qt LNK1158无法运行rc.exe解决办法
找出电脑上的rc.exe ,发现在C:\Program Files (x86)\Windows Kits\10\bin\10.0.xxxx.0\x86 路径下. 找出电脑上的rc.exe ,发现在C: ...
- bootstrap 和datapicker 样式不兼容修复
修改 datepicker.js内的 layout 方法 function(el) { var options = $(el).data('datepicker'); var cal = $('#' ...
- practically|exclamation|defy|thrilled|
ADV 简直:几乎Practically means almost, but not completely or exactly. He'd known the old man practically ...
- JS实现select去除option的使用注意事项
网上讲JS动态添加option和删除option的文章很多,在此推荐一篇: http://www.jb51.net/article/35205.htm 我使用的是如下方法: function remo ...
- js 实现排序算法 -- 归并排序(Merge Sort)
原文: 十大经典排序算法(动图演示) 归并排序 归并排序是建立在归并操作上的一种有效的排序算法.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得 ...