Vue中localStorage那些你不知道的知识分享

Vue localStorage用法 Vue localStorage 2023-05-19 20:05:07 598人浏览泡泡鱼

摘要

目录状态管理的必要性localStorage储存和获取数据生命周期VuexVuex的概念Vuex的工作流程Vuex和localStorage的区别总结前端开发中，状态管理是一个很重要

状态管理的必要性

在了解Vuex和localStorage之前，我们先来看一下状态管理的必要性。

在Vue.js应用程序中，组件的状态需要在多个组件中共享。如果将状态保存在组件内部，那么跨组件的通信就会变得困难。此外，在处理异步请求或使用websocket连接时，状态可能会根据接收到的信息而改变。在这种情况下，如果不使用状态管理器，则可能会遇到诸如同样的数据重复渲染、缺少正确的查询结果等问题。

为了实现灵活性和可维护性，需要使用状态管理器。这里的状态指的是应用程序中的可变数据。

localStorage

HTML5引入了一种叫做localStorage的机制。它可以让我们像cookie一样存储简单的键值对，但是相较于cookie更为强大且安全，它没有大小限制。当然，我们也可以使用sessionStorage和IndexedDB，但是这些都不适合长期使用。

储存和获取数据

localStorage提供了两种方法setItem()和getItem()，可以很方便地储存和获取数据。

localStorage.setItem('name', 'Tom');
var name = localStorage.getItem('name');
console.log(name); // 输出: Tom

在这里，我们将名字Tom存储在localStorage中，并使用getItem()方法检索数据。

生命周期

通过localStorage设置的数据是长期的，除非用户手动清除它们。这意味着，即使关闭浏览器并重新打开它，数据仍然会存在。

而且，localStorage也可以在不同的标签页之间进行数据共享。让我们看一个例子：

在tab A中执行以下操作：

localStorage.setItem('count', 0);

在tab B中执行以下操作：

var count = localStorage.getItem('count');
console.log(count); // 输出: 0

在这个例子中，我们在tab A中将count初始值设为0，然后在tab B中可以访问该值。

Vuex

Vuex是Vue.js的状态管理工具。它将应用程序中共享的所有状态集中在一个store中。这使得跨组件通信更容易，同时还可以支持异步操作，当数据发生变化时使得组件重渲染更简单。

Vuex的概念

Vuex包含五个核心部分：state、getters、mutations、actions和modules。

State: 就相当于组件中的属性（data）。它是唯一的，并且驱动Vue.js应用程序的所有状态。
Getters: 可以理解为state的计算属性，就像computed一样。它们缓存一些常用计算结果，可以提高性能。
Mutations: 用于变更vuex状态中的属性。它们必须同步进行。Vuex使用提交（commit）而非直接变异来执行此操作。
Actions: 指定一种在组件中触发mutation的方法，可以包含任意异步操作。
Modules: 允许分割vuex全局状态为模块。每个模块都有自己的state、mutations、actions和getters。这使得更大和复杂的应用程序更易于管理。

Vuex的工作流程

当用户与应用程序交互并触发操作时，该操作可能会更改vuex状态。以下是更改vuex状态的工作流程：

组件分发一个action
action调用api或者执行其他异步操作
API响应将特定数据返回到action
action调用mutation以更新状态
mutation更改状态并通知所有已注册的观察程序
所有注册了此mutation的组件都会进行更新

Vuex和localStorage的区别

在了解了Vuex和localStorage的基础知识后，我们来看一下它们之间的区别。

这两个工具被设计为不同的目的：Vuex旨在管理Vue.js应用程序中的状态，而localStorage则提供了一种简单的本地存储机制。
生命周期不同：localStorage中保存的数据可以长期存在，除非明确清除，而Vuex存储的数据仅在Vuex实例存在的生命周期内存在。
面向的对象不同：localStorage面向键/值对，而Vuex面向状态（状态是可以作为字典键的对象）。
对于数据量较大的情况， localStorage性能上可能会有问题。而Vuex由于是专门维护状态的库，所以无论是数据量还是读写操作都比localStorage更为高效、快速。