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. [LC] 121. Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  2. 会议信息|CNKI|AIAA|万方|AIP|CNKI|EI|CPCI|BP|INSPEC

    会议论文: 学术文献的三大支柱是期刊.专利和学位论文.会议论文是新的所以发文章快,灰色的,有些只有摘要,所以不容易获取. 有以下二次文献数据库,仅有摘要: CPCI BP:生物医学类 INSPEC在W ...

  3. django框架中的cookie与session

    cookie因为http是一个无状态协议,无法记录用户上一步的操作,所以需要状态保持.cookie和session的区别:1.cookie是保存在浏览器本地的,所以相对不安全.cookie是4k的大小 ...

  4. Qt QString与int的转换

    QString转int QString a=" ; int b; b=a.toInt();   int 转 QString ; QString b; b=QString::number(a)

  5. HDU-1711-Number Sequence(KMP)(Rabin-Karp)

    Rabin-Karp Accepted 1711 904MS 5272K 1310 B G++ #include "bits/stdc++.h" using namespace s ...

  6. response读取图片+下载图片

    读取图片 import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import ...

  7. POJ 2112 Optimal Milking 最短路 二分构图 网络流

    题意:有C头奶牛,K个挤奶站,每个挤奶器最多服务M头奶牛,奶牛和奶牛.奶牛和挤奶站.挤奶站和挤奶站之间都存在一定的距离.现在问满足所有的奶牛都能够被挤奶器服务到的情况下,行走距离的最远的奶牛的至少要走 ...

  8. webpack在用dev-server的时候怎么配置多入口文件

    类似下面这样就可以了,entry设置为对象 每个入口设置为属性,属性的值是一个数组,就可以像单入口一样往这个数组添加entry: { Profile: [ 'webpack-dev-server/cl ...

  9. [PyTorch入门]之迁移学习

    迁移学习教程 来自这里. 在本教程中,你将学习如何使用迁移学习来训练你的网络.在cs231n notes你可以了解更多关于迁移学习的知识. 在实践中,很少有人从头开始训练整个卷积网络(使用随机初始化) ...

  10. Android Pay正式启用 支付宝们还好吗

    Pay正式启用 支付宝们还好吗" title="Android Pay正式启用 支付宝们还好吗"> 苹果发布会上能够真正让人眼前一亮的产品并不多,但对于" ...