Vue.js 超详细入门与项目实战（微课视频版）课件 第10章 Plnia 状态管理

第10章Pinia状态管理课件V1.0

教学内容第一节

Pinia介绍第二节State第三节

Getters第四节Actions第五节其他扩展插件知识目标教学目标理解和掌握Pinia模块安装的方法掌握Pinia对象实例创建和配置的过程理解掌握Pinia各组成部分的构建和访问知识点预览#节知识点难点重点应用10C10-01Pinia介绍1、安装和配置Pinia

2、创建StoreC10-02State1、构建和访问State2、重置和变更State3、其他操作方式C10-03Getters1、构建和访问Getters2、其他操作方式C10-04Actions1、构建和执行Actions中方法2、执行异步请求C10-05其他扩展插件1、扩充Store2、数据持久化

与其他模块一样，Pinia的安装只需要在项目根目录下执行下列指令：npminstallpinia

Pinia安装成功后，并不能直接在组件中使用，需要对它进行全局配置。安装和配置Pinia

完成pinia的安装和全局性配置后，接下来就可以构建pinia的结构，pinia是状态管理工具，管理的方式是构建一个个store对象，与vuex的分模块管理不同，pinia中的一个store对象就是一个模块，它与vuex的区别如图所示。创建StoreVuexStoreModuleAModuleBStateMutationsActionsGettersStateMutationsActionsGettersPiniaStoreAStoreBStateActionsGettersStateActionsGetters在很多情况下，State是Store对象的最重要的组成部分，是Store对象的核心，因为开发者在创建一个Store对象时，首先考虑的是State如何设计。在Pinia中，State是一个返回初始状态值的函数，通过函数的形式，既可以支持客户端，也能响应服务端。

构建和访问State

当保存Store的实例化对象后，不仅可以访问和操作state对象的属性值，还可以直接调用$retset()方法，使用state对象重新还原成初始值。

既可以通过Store的实例化对象访问State的属性并变更它的值，还可以借助mapState函数将State属性映射为只读的计算属性，如果调用mapWritableState函数，则State属性映射后，还可以进行修改。

虽然这种映射的方式可以访问State中的某个属性值，但它是只读的，不能修改这个属性的值，如果需要修改映射的值，可以调用mapWritableState函数。重置和变更State

如果需要批量变更State中的多个属性值，可以调用Store实例化对象中的$patch方法，它可以用对象的形式在同一时间内，一次性更新多个属性值。

虽然这种对象形式的更新方式，可以一次更新多个属性值，但如果属性值是数组，这种更新方式的性能就非常低，为了解决这个问题，在调用$patch方法时，也允许使用一个函数的形式来实现多个属性的更新。其他操作方式

Getters是针对State中的属性再次计算，它也是Store中一个非常重要的组成部分，因为当进入不同页面时，State对象的某个初始值也需要发生相应变化，而Getters就可以实现这些功能，可以根据不同的页面定义不同的函数，并在对应的页面中执行即可。

构建和访问Getters

与State对象一样，Getters对象也可以通过mapState映射成computed对象中的一个成员，当调用时，才会重置State的属性值。其他操作方式

Store中的Actions部分，用于定义操作属性的方法，类似于组件中的methods部分，它与Getters都可以操作State属性，但在定义方法时，Getters是对State属性进行加工处理，再返回使用，属于内部计算；Actions则是根据业务逻辑，操作State或Getters保存的值，方法中可以实现异步请求、调用任意的API，属于逻辑层部分。

Actions属于Store中的一部分，因此，可以使用defineStore方法中Actions属性来构建某个业务逻辑。Actions属性构建完成后，如果需要在其他组件中调用，通常使用mapActions，将它的操作属性映射成组件methods中的一部分。构建和执行Actions中方法如果需要缓存整个Store对象中的State数据，可以使用pinia-plugin-persist插件，该插件是专门用于Pinia的扩展插件，功能是将State数据保存至localStorage或sessionStorage中，默认是以Store的i