Vue中存储数据方法：localStorage、sessionStorage和Vuex的区别和简单使用

localStorage和sessionStorage都是通过键值对的方式进行存储，用于不同页面之间传值 （注意：它们都只接受存储字符串类型的数据，若遇到json格式的数据需要使用JSONstringify()将数据转化为字符串类型） ，区别在于：

1、sessionStorage：用于短期存储，当浏览器关闭之后sessionStorage中存储的数据就会被清除，浏览器不关闭仅关闭网页数据不删除。

2、localStorage：用于长期存储，当浏览器关闭之后localStorage存储的内容不会被清除，数据一直存储在本地。

vuex常被用于两个组件进行数据交互时，如一个组件修改了某一个数据，需要另一个组件也同步这个更改，而localStorage和sessionStorage无法同步更改，这时就需要使用vuex来达到这个目的。

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

用法： 

储存：sessionStoragesetItem("变量名", "变量值")；

获取： sessionStoragegetItem("变量名")；

localStorage 方法存储的数据长期存在浏览器中，必须手动清除

用法： 

储存：localStoragesetItem("变量名", "变量值")；

获取：localStoragegetItem("变量名");

Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

用法： >

Vuex 是一个专为 Vuejs 应用程序开发的 状态管理模式 。它采用集中存储管理应用的所有组件的状态的方式，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

两种使用方法：

>

在mutation的state的自定义set change方法的时候 根据使用场景的不同

储存到Session Storage和Local Storage或者其他本地储存中

把对应state的初始化改成从本地储存中获取

另外本地储存 如果是存储JSON字符串 一定要做好相应的容错处理

1最重要的区别

一，vuex 存储在内存

二，localstorage 以文件的方式存储在本地

三，localstorage 只能存储字符串类型的数据，储存对象需要JSON的Stringify 和 parse 方法进行处理，读取内存比读取硬盘速度要快

2应用场景，

一，vuex 是一个专为vuejs 应用程序开发的状态管理模式，它采用集中式管理应用的所有组件状态，并以相应的规则保证

状态的以一种 可以预测的方式发生变化，vuex 用于组件之间的传值，

二，localstorage 是本地储存，是将数据存储到浏览器的方法，一般在跨页面传递数据时使用。

三，vuex能够做到数据的响应式，localstorage 不能

3永久性

刷新页面时vuex存储的值会丢失，localstorage 不会，

全局状态管理器，可以在项目的任何一个组件中去获取和修改，修改可以得到全局响应的变量

vue-cli2 项目中安装vuex，使用 npm install vuex --save

安装成功后，在src目录下新建一个store文件,里面创建一个js文件

在js文件中写入：

然后在mainjs文件中引入 store 并注册到 vue 实例中

vuex的文件配置到这里就完成了

现在再回去看store文件里的参数，这几个对象就是vuex五大核心：

State ：可全局访问的对象

Getter ：和vue的computed一样，用来实时监听state的值的变化（最新状态）

Mutation ：存放改变state值的方法（同步）

Action ：触发mutations里面的方法（异步）

module ：模块

State是存储在Vuex中的数据对象，和Vue实例中的data一样。只不过State是可以全局访问的。

定义stata对象，直接在 state 里面定义 key:val ，它可以定义任意数据类型

在页面中获取state的值 使用 this$storestate

在这里 state 通常都是挂载到 computed 计算属性上，这样当state的值发生改变的时候都能及时的响应。

当然也能用到 watch 去监听

State中的辅助函数 mapState

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

输出

Vuex 允许我们在 store 中定义 getter （可以认为是 store 的计算属性）。就像计算属性 computed 一样， getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值( state 中的属性)发生了改变才会被重新计算。

Getter的作用就是用来实时监听state的值的变化

定义Geters对象

使用 state 作为其第一个参数

可以使用其他 getter 函数作为第二个参数

在页面中使用getters，使用 this$storegetters

Getters中的辅助函数 mapGetters

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

输出

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

使用 state 作为第一个参数

使用 this$storecommit('方法名') 触发mutations中的方法

输出

而第二参数官方解释叫 提交载荷（Payload）

可以向 storecommit 传入额外的参数，即 mutation 的 载荷（payload）

简单来说就是可以在在第二参数里传入额外的参数

这里还是用name来做例子

输出

在 Vuex 中，mutation 必须是同步函数

Action 可以包含任意异步 *** 作，Action的作用就是异步触发Mutations

定义action对象

接收一个 context 参数和一个要变化的形参

context 与 store 实例具有相同的方法和属性，所以他可以执行 contextcommit("") ，也可以使用 contextstate 和 contextgetters 来获取 state 和 getters 。

使用 this$storedispatch("方法名") 方法执行Actions

输出

同样Action还支持载荷方法，传入第二形参

输出

其中 module 的作用是可以把 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

主要是为了解决由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

简单来说就是可以把vuex模块化

1vuex的优缺点

2vuex的使用

先上目录结构：

​

项目中想要管理的数据和状态都在这

连接actions和mutations的桥梁（ *** 作数据的指令）

处理数据， *** 作状态，获取数据都在这，同步去处理数据对应的调用方法 commit

要改变数据时直接用this$storecommit(SET_LOGIN_MSG, loginMsg)即可

对于一些接口数据，可能需要在组件内异步得去处理一些事情，这时候就需要写在这里，对应的调用方法是dispatch，需要注意的是：它提交的是mutation，不做数据和状态的更改，这些 *** 作在mutations中处理

这里的参数 context 是对象{commit, state},后一个参数是你需要传的数据

对应的在组件内调用方法

由于是异步得所有可以用promise封装使用，解决callhack

以上方法就可以完成vuex的整个状态管理了，完全没有任何问题。但有时候会有一些需求，比如变量name需要在firstName和lastName其中任何一个发生变化时同时发生变化，如果在组件内我们使用computed就能做到，在vuex需要我们的getters登场

Module

到这就完了吗？并没有。如果是大型项目，你会发现需要使用vuex的数据太多了，然而把所有的数据处理全部放在 mutationsjs文件中显得很杂乱，并不利于查找与管理，此时我们就需要Module,分模块管理。怎么做呢？

mod1和mod2就是 被分成的两个子模块。因为每个子模块数据和状态不会太多，因此我们把state，mutations，actions，getter写在一个文件中如下

mod1js

mod2js也是如此

那么如何调用呢？

更新数据的方法会有所变化吗？依然按照原来的方法使用就行了

总结：

将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

3vuex的注意点

a在以往我们更新数据时为了防止数据随时变化所以会在更新组件时及时更新数据，甚至每隔一段时间更新数据，有了vuex就无需这么做了，我们只要在我们更改数据时更新一下数据即可。如用户的基本信息，我们只在用户对用户信息进行修改或增加时更新即可，这样在任何组件中使用用户信息时数据都是最新的。

b使用vuex我们在组件内更改数据是无效的。例如：this$storestatename=‘小明‘，这么做会报错。

问题描述：

vuex $storestate的值能获取，但是里面具体的值就获取不到

原因：

对象变量都是对象在内存中的地址值，普通数据变量是实际的值。所以打印的那个对象其实在打印的那一刻是空对象，但是展开的时候，commit *** 作已经完成，所以对象被扩展为期望看到的值。但是普通类型打印的那一刻是什么就是什么。

解决办法：

使用commit往state里存对应数据，通过getters取数据

以上就是关于Vue中存储数据方法：localStorage、sessionStorage和Vuex的区别和简单使用全部的内容，包括:Vue中存储数据方法：localStorage、sessionStorage和Vuex的区别和简单使用、23、Vuex、localStorage、sessionStorage、cookies的区别、Vuex4.x（一）初识vue3的状态管理-state等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！