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

第10章Pinia状态管理;教学内容;知识目标;知识点预览;与其他模块一样，Pinia的安装只需要在项目根目录下执行下列指令：

npminstallpinia

Pinia安装成功后，并不能直接在组件中使用，需要对它进行全局配置。;完成pinia的安装和全局性配置后，接下来就可以构建pinia的结构，pinia是状态管理工具，管理的方式是构建一个个store对象，与vuex的分模块管理不同，pinia中的一个store对象就是一个模块，它与vuex的区别如图所示。

;在很多情况下，State是Store对象的最重要的组成部分，是Store对象的核心，因为开发者在创建一个Store对象时，首先考虑的是State如何设计。在Pinia中，State是一个返回初始状态值的函数，通过函数的形式，既可以支持客户端，也能响应服务端。

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

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

虽然这种映射的方式可以访问State中的某个属性值，但它是只读的，不能修改这个属性的值，如果需要修改映射的值，可以调用mapWritableState函数。;如果需要批量变更State中的多个属性值，可以调用Store实例化对象中的$patch方法，它可以用对象的形式在同一时间内，一次性更新多个属性值。

虽然这种对象形式的更新方式，可以一次更新多个属性值，但如果属性值是数组，这种更新方式的性能就非常低，为了解决这个问题，在调用$patch方法时，也允许使用一个函数的形式来实现多个属性的更新。;Getters是针对State中的属性再次计算，它也是Store中一个非常重要的组成部分，因为当进入不同页面时，State对象的某个初始值也需要发生相应变化，而Getters就可以实现这些功能，可以根据不同的页面定义不同的函数，并在对应的页面中执行即可。;与State对象一样，Getters对象也可以通过mapState映射成computed对象中的一个成员，当调用时，才会重置State的属性值。;Store中的Actions部分，用于定义操作属性的方法，类似于组件中的methods部分，它与Getters都可以操作State属性，但在定义方法时，Getters是对State属性进行加工处理，再返回使用，属于内部计算；Actions则是根据业务逻辑，操作State或Getters保存的值，方法中可以实现异步请求、调用任意的API，属于逻辑层部分。

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

npmipinia-plugin-persist--S