首页 > 其他分享 >Vuex 和 localStorage 的区别

Vuex 和 localStorage 的区别

时间:2023-03-24 11:23:23浏览次数:38  
标签:存储 区别 vuex localStorage 组件 localstorage Vuex

Vuex 和 localStorage 的区别
最重要的区别:vuex 存储在内存中localstorage 则以文件的方式存储在本地,只能存储字符串类型的数据,存储对象需要 JSON 的 stringify 和parse 方法进行处理。读取内存比读取硬盘速度要快。

应用场景 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex 用于组件之间的传值。localstorage 是本地存储,是将数据存储到浏览器的方法,一般是在跨页面传递数据时使用 。 Vuex 能做到数据的响应式,localstorage 不能。

永久性 刷新页面时 vuex 存储的值会丢失,localstorage 不会。注意:对于不变的数据确实可以用 localstorage 可以代替vuex,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage无法做到,原因就是区别 1。

vuex持久化插件
1) vuex-persistedstate
2) vuex-persist

标签:存储,区别,vuex,localStorage,组件,localstorage,Vuex
From: https://www.cnblogs.com/MrZhous/p/17077889.html

相关文章

  • Linux命令su、sudo、sudo su、sudo -i使用和区别
    sudo与su两个命令的最大区别是:sudo命令需要输入当前用户的密码,su命令需要输入root用户的密码。另外一个区别是其默认行为,sudo命令只允许使用提升的权限运行单个命......
  • Vue.js Vuex实现求和案例
    视频Vuex版本componentsCount.vue<template> <div> <!--模板里能看见vc上所有东西--> <h1>当前求和为:{{$store.state.sum}}</h1> <selectv-model.number="n......
  • Vue.js 搭建Vuex环境
    视频npmivuex@33.搭建vuex环境创建文件:src/store/index.js//引入Vue核心库importVuefrom'vue'//引入VueximportVuexfrom'vuex'//应用Vuex插件Vue.u......
  • Android VS iOS:论移动端上的测试区别
     如今社会,移动设备的普及让移动端软件的测试工作变得更加复杂。移动设备的多样化和不断更新的操作系统为测试人员带来了诸多挑战。在移动端测试中,Android和iOS是两个最常......
  • Vue.js Vuex简介
    简介视频......
  • Vue,js Vuex工作原理图
    Vuex原理解析视频107传参带数据允许走这条线store管理......
  • Mysql B-Tree与B+Tree区别
    一、B-Tree与B+Tree介绍B-TreeB-Tree是一种平衡树,用于支持快速的查找、插入和删除操作。B-Tree通常被用作关系数据库管理系统(RDBMS)的索引结构,因为它能够在大数据集合中......
  • 单页面与多页面的区别及优缺点
    单页面是指只有一个主页面的应用,浏览器一开始要加载所有必须的html,js,css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互......
  • resultType和resultMap区别
    ResultTypeResultType相对与ResultMap而言更简单一点。只有满足ORM(ObjectRelationalMapping,对象关系映射)时,即数据库表中的字段名和实体类中的属性完全一致时,才能使用,否......
  • GRE和XVLAN的区别
       VXLAN和GREmtu的说明 VXLAN模式下虚拟机中的mtu最大值为1450,也就是只能小于1450,大于这个值会导致openvswitch传输分片,进而导致虚拟机中数据包数据重传,从......