Vuex localStorage的具体使用

Vuex localStorage 2023-05-20 05:05:04 881人浏览安东尼

摘要

目录状态管理的必要性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。这使得更大和复杂的应用程序更易于管理。