Vue.js前端框架项目实战（微课版） 课件 5.3 状态管理

5.3状态管理前端框架技术与应用FrontendFrameworks应用架构优化组件通信允许不同组件之间共享数据和事件，从而实现复杂的用户交互。随着应用规模的增长，组件间的通信变得越来越复杂，这引出了状态管理的需求。状态管理不仅仅是组件间通信的延伸，它还涉及如何有效地存储、更新和访问应用的数据状态。状态管理的核心在于确保数据的一致性和可预测性，这对于维护大型应用至关重要。通过引入状态管理，我们可以将应用的状态集中管理，减少组件间的直接通信，从而降低系统的复杂性。状态管理工具和库，提供了强大的机制来处理状态的变更和分发，使得状态管理更加高效和可维护。前言前言子向父传值非父子组件通信组件通信mitt父向子传值Props组件事件事件总线父子组件通信父子双向传值v-model状态管理Pinia在本章节中，我们引入Pinia作为Vue.js的官方状态管理库。Pinia旨在提供Vuex的替代方案，但更加简洁和类型安全。它允许开发者跨组件或页面共享状态，是推荐的Vue3状态管理工具。Pinia的核心特性包括类型安全、简洁的API、模块化设计以及插件支持，这些特性使得Pinia成为管理Vue应用状态的首选。概述1Pinia简介2Pinia基本用法3Pinia核心概念目录|CONTENT4Pinia持久化存储Pinia（发音为/piːnjʌ/，类似于“peenya”）是Vue.js的官方状态管理库，其名称灵感源自西班牙语单词“piña”（意为“菠萝”）。正如菠萝由许多独立花朵组成，最终形成一个复合果实，Pinia代表了独立但相互关联的状态存储（Store）。每个Store独立创建，共同构成一个统一的状态管理网络。Pinia不仅象征着状态管理的整合性，也如同起源于南美洲的美味菠萝，成为前端状态管理领域的一颗璀璨明珠，为Vue应用提供了一种安全、高效的状态共享方式。1Pinia简介Pinia是什么Pinia的引入，即使是在小型单页应用中，也带来了以下增强功能：（1）测试工具集：提供了一套完整的测试工具，使得状态管理的测试更加便捷。（2）插件支持：允许通过插件来扩展Pinia的功能，增加灵活性。（3）TypeScript支持：为JavaScript开发者提供适当的TypeScript支持，包括自动补全功能。（4）服务端渲染兼容：确保即使在服务器端渲染的应用中，状态管理也是安全的。（5）Devtools集成：支持Devtools，方便开发者追踪actions和mutations的时间线。（6）组件状态展示：在组件中展示它们所用到的Store，提高开发效率。（7）时间旅行调试：提供时间旅行功能，让调试变得更加容易。（8）热更新支持：支持热更新，无需重载页面即可修改Store，保持开发时的当前状态。通过这些功能，Pinia不仅简化了状态管理的复杂性，还增强了应用的安全性和开发体验。1Pinia简介Pinia的优势组件之间传递数据1Pinia简介状态管理的原理通过状态管理传递数据（1）VueComponent（Vue组件）：这是应用的构建块，可以是页面的一部分或整个页面。（2）Pinia：用虚线框和两个圆形表示，分别代表Pinia中的Actions和State。（3）Actions（动作）：它是用于处理异步逻辑和与后端API交互的函数。（4）State（状态）：它存储了应用的共享数据。（5）FunctionCall（函数调用）：从Vue组件指向PiniaActions的箭头表示组件通过函数调用与Pinia交互，通常是触发一个Action。（6）BackendAPI（后端API）：Pinia的Actions可以与后端API进行交互，例如发送请求或接收数据。（7）DevTools（开发工具）：如VueDevtools，它们可以连接到Pinia的State，以便开发者可以监控和调试状态。（8）双向箭头：Actions和State之间的双向箭头表示Actions可以读取和修改State，而State的变化也可以触发组件的更新。1Pinia简介Pinia的基本概念该图展示了Vue组件如何通过调用Pinia的Actions来改变状态，以及如何通过State响应状态变化的整个流程。它还展示了Actions如何与后端API交互，以及开发工具如何辅助状态管理。通过这种机制，Pinia提供了一种集中式的状态管理方法，使状态变更和访问更加清晰和可预测。1Pinia简介Pinia的实现流程在理解了状态管理的重要性和Pinia的基本原理后，我们将付诸实践，学习Pinia的安装和使用过程，这包括如何在Vue项目中引入Pinia，以及如何通过Pinia来创建、管理和访问状态。（1）安装Pinia在项目创建之后，在package.json文件检查Pinia的安装情况，如果在dependencies节点下没有Pinia的安装信息，那么需要我们通过以下命令进行安装：npminstallpinia2Pinia基本用法Pinia的使用（2）注册Pinia下一步是在main.js文件中将Pinia集成到Vue应用中。通过use方法将Pinia注册到应用实例中：2Pinia基本用法Pinia的使用（3）创建Store在src目录下创建一个名为stores的文件夹，在该文件夹下，创建一个名为counterStore.js的文件，该文件中写入以下代码，通过defineStore()方法创建一个名为counter的store：（4）在组件中使用我们分别创建两个组件，其中一个组件对Store中的数据进行操作并显示数据，另一个组件对数据进行显示。虽然Pinia支持直接修改Store中的数据，但是并不推荐这么做，而是推荐使用actions中的方法来修改数据。

2Pinia基本用法在src/components/PiniaComponent1.vue组件中写入以下代码：在src/components/PiniaComponent2.vue组件中写入以下代码：（4）在组件中使用2Pinia基本用法创建父组件src/components/Pinia.vue，在父组件中同时显示两个组件，方便观察。在该组件中写入以下代码：另外，我们还需要到路由配置文件src/router/index.js中，配置路由：到主组件src/App.vue中，添加页面入口：2Pinia基本用法Pinia的使用实现效果当点击组件1中的“点击加1”按钮后，counter这个Store中的count属性值变为1。实现效果同时组件2中引用到该属性的地方也变为1。3Pinia核心概念Pinia的核心概念Pinia存储模型Pinia的存储模型基于Store概念，每个Store都是一个独立的模块，包含自己的state、getters和actions。这种模块化的设计允许我们将应用状态逻辑清晰地分割，便于管理和维护。Pinia中的state是响应式的，这意味着当state发生变化时，所有依赖于这些state的组件都会自动更新。这种响应式系统是Vue3的基石，Pinia利用这一特性来确保状态的变更能够高效地传播到整个应用。正如在上一节中，counterStore的state中count的值发生变化，组件1和组件2的模板中用到count的地方，随之变化了。响应式状态（State）Getters允许我们从store的state中派生额外的值，可以用于计算从state派生的值，或者对state进行转换而不需要实际改变state。Getters也是响应式的，它们可以被缓存，并且只在依赖的state变化时才重新计算，类似于Vue组件中的计算属性。计算属性（Getters）3Pinia核心概念Pinia的核心概念——计算属性在这个例子中，我们为counterStore添加了两个getters：doubleCount：这个getter接收state作为参数，并返回count的两倍。在组件中，你可以像访问state一样访问这个getter，Pinia会自动处理依赖跟踪和更新。isOdd：这个getter检查count是否为奇数，并返回一个布尔值。在组件中使用这些getters的方式与访问state相同，例如，在组件src/components/PiniaComponent2.vue中访问这些getters：3Pinia核心概念Pinia的核心概念——计算属性3Pinia核心概念Pinia的核心概念动作（Actions）Actions在Pinia中用于处理异步操作和执行复杂的同步逻辑。它们可以修改state，并且可以包含异步调用，如API请求。Actions的设计使得状态更新逻辑集中且清晰。Pinia支持状态持久化，允许我们将应用的状态保存到本地存储中，并在应用重启时恢复这些状态。这一特性对于需要持久化用户会话或应用配置的场景非常有用。持久化（Persistence）Pinia的插件系统允许开发者扩展Pinia的功能。通过插件，我们可以添加新的特性，如状态持久化、日志记录、状态验证等，从而进一步增强Pinia的能力。插件系统（PluginSystem）Pinia与VueDevtools集成，提供了时间旅行调试和状态快照功能。这使得开发者能够更容易地追踪状态变化，调试应用，以及优化开发流程。DevTools集成在使用Pinia时，我们可能会遇到页面刷新后Store中的数据被重置的问题。这是因为Pinia默认将数据存储在浏览器的内存中，而页面刷新会清空内存中的数据。为了实现本地持久化存储，我们可以集成

pinia-plugin-persistedstate插件。该插件能够将Pinia的状态保存到浏览器的本地缓存中，从而解决页面刷新后数据丢失的问题。4Pinia持久化存储Pinia持久化存储的概念（1）安装pinia-plugin-persistedstate使用以下命令来安装pinia-plugin-persistedstate插件：npminstallpinia-plugin-persistedstate（2）集成到Pinia在项目的主配置文件src/main.js中，引入并使用pinia-plugin-persistedstate插件：4Pinia持久化存储Pinia持久化存储的使用（3）使用持久化功能在定义Piniastore时，通过persist选项启用持久化功能，例如在5.3.2节中创建的src/stores/counterStore.js文件中写入以下代码：整个Store将使用默认持久化配置保存，默认持久化配置如下：使用localStorage进行存储store.$id作为storage默认的key使用JSON.stringify/JSON.parse进行序列化/反序列化整个state默认将被持久化4Pinia持久化存储Pinia持久化存储的使用（3）使用持久化功能此时，打开浏览器开发者工具，在“应用”选项卡中，在左侧导航栏中找到“存储”，点击“本地存储空间”下的网站地址“http://localhost:5173/”，就会看到存储的key为counter的数据。在我们按F5刷新页面之后，这些数据不会丢失。4Pinia持久化存储Pinia持久化存储的使用（4）高级配置如果需要更详细的配置，可以在src/stores/counterStore.js文件中的persist选项中传递一个配置对象，配置对象包括以下参数：key：这是存储在localStorage中的键名，用于唯一标识这个store的数据。当你有多个store时，每个store可以使用不同的键名来避免数据冲突。storage：指定存储位置为浏览器的localStorage。localStorage是一种持久化存储，数据在浏览器关闭后仍然存在。你也可以使用sessionStorage或自定义存储机制。pick：指定要持久化的字段。这里只持久化count和

两个字段。pick选项允许你选择性地持久化部分状态，而不是整个状态对象。这在状态对象较大时非常有用，可以减少存储的数据量，提高性能。4Pinia持久化存储Pinia持久化存储的使用在pinia-plugin-persistedstate的strategies配置中，storage选项可以指定多种存储位置。常用的存储位置包括localStorage和sessionStorage，它们都是