Vue.js 超詳細(xì)入門(mén)與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第10章 Plnia 狀態(tài)管理

第10章Pinia狀態(tài)管理課件V1.0

教學(xué)內(nèi)容第一節(jié)

Pinia介紹第二節(jié)State第三節(jié)

Getters第四節(jié)Actions第五節(jié)其他擴(kuò)展插件知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握Pinia模塊安裝的方法掌握Pinia對(duì)象實(shí)例創(chuàng)建和配置的過(guò)程理解掌握Pinia各組成部分的構(gòu)建和訪問(wèn)知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用10C10-01Pinia介紹1、安裝和配置Pinia

2、創(chuàng)建StoreC10-02State1、構(gòu)建和訪問(wèn)State2、重置和變更State3、其他操作方式C10-03Getters1、構(gòu)建和訪問(wèn)Getters2、其他操作方式C10-04Actions1、構(gòu)建和執(zhí)行Actions中方法2、執(zhí)行異步請(qǐng)求C10-05其他擴(kuò)展插件1、擴(kuò)充Store2、數(shù)據(jù)持久化

與其他模塊一樣，Pinia的安裝只需要在項(xiàng)目根目錄下執(zhí)行下列指令：npminstallpinia

Pinia安裝成功后，并不能直接在組件中使用，需要對(duì)它進(jìn)行全局配置。安裝和配置Pinia

完成pinia的安裝和全局性配置后，接下來(lái)就可以構(gòu)建pinia的結(jié)構(gòu)，pinia是狀態(tài)管理工具，管理的方式是構(gòu)建一個(gè)個(gè)store對(duì)象，與vuex的分模塊管理不同，pinia中的一個(gè)store對(duì)象就是一個(gè)模塊，它與vuex的區(qū)別如圖所示。創(chuàng)建StoreVuexStoreModuleAModuleBStateMutationsActionsGettersStateMutationsActionsGettersPiniaStoreAStoreBStateActionsGettersStateActionsGetters在很多情況下，State是Store對(duì)象的最重要的組成部分，是Store對(duì)象的核心，因?yàn)殚_(kāi)發(fā)者在創(chuàng)建一個(gè)Store對(duì)象時(shí)，首先考慮的是State如何設(shè)計(jì)。在Pinia中，State是一個(gè)返回初始狀態(tài)值的函數(shù)，通過(guò)函數(shù)的形式，既可以支持客戶端，也能響應(yīng)服務(wù)端。

構(gòu)建和訪問(wèn)State

當(dāng)保存Store的實(shí)例化對(duì)象后，不僅可以訪問(wèn)和操作state對(duì)象的屬性值，還可以直接調(diào)用$retset()方法，使用state對(duì)象重新還原成初始值。

既可以通過(guò)Store的實(shí)例化對(duì)象訪問(wèn)State的屬性并變更它的值，還可以借助mapState函數(shù)將State屬性映射為只讀的計(jì)算屬性，如果調(diào)用mapWritableState函數(shù)，則State屬性映射后，還可以進(jìn)行修改。

雖然這種映射的方式可以訪問(wèn)State中的某個(gè)屬性值，但它是只讀的，不能修改這個(gè)屬性的值，如果需要修改映射的值，可以調(diào)用mapWritableState函數(shù)。重置和變更State

如果需要批量變更State中的多個(gè)屬性值，可以調(diào)用Store實(shí)例化對(duì)象中的$patch方法，它可以用對(duì)象的形式在同一時(shí)間內(nèi)，一次性更新多個(gè)屬性值。

雖然這種對(duì)象形式的更新方式，可以一次更新多個(gè)屬性值，但如果屬性值是數(shù)組，這種更新方式的性能就非常低，為了解決這個(gè)問(wèn)題，在調(diào)用$patch方法時(shí)，也允許使用一個(gè)函數(shù)的形式來(lái)實(shí)現(xiàn)多個(gè)屬性的更新。其他操作方式

Getters是針對(duì)State中的屬性再次計(jì)算，它也是Store中一個(gè)非常重要的組成部分，因?yàn)楫?dāng)進(jìn)入不同頁(yè)面時(shí)，State對(duì)象的某個(gè)初始值也需要發(fā)生相應(yīng)變化，而Getters就可以實(shí)現(xiàn)這些功能，可以根據(jù)不同的頁(yè)面定義不同的函數(shù)，并在對(duì)應(yīng)的頁(yè)面中執(zhí)行即可。

構(gòu)建和訪問(wèn)Getters

與State對(duì)象一樣，Getters對(duì)象也可以通過(guò)mapState映射成computed對(duì)象中的一個(gè)成員，當(dāng)調(diào)用時(shí)，才會(huì)重置State的屬性值。其他操作方式

Store中的Actions部分，用于定義操作屬性的方法，類似于組件中的methods部分，它與Getters都可以操作State屬性，但在定義方法時(shí)，Getters是對(duì)State屬性進(jìn)行加工處理，再返回使用，屬于內(nèi)部計(jì)算；Actions則是根據(jù)業(yè)務(wù)邏輯，操作State或Getters保存的值，方法中可以實(shí)現(xiàn)異步請(qǐng)求、調(diào)用任意的API，屬于邏輯層部分。

Actions屬于Store中的一部分，因此，可以使用defineStore方法中Actions屬性來(lái)構(gòu)建某個(gè)業(yè)務(wù)邏輯。Actions屬性構(gòu)建完成后，如果需要在其他組件中調(diào)用，通常使用mapActions，將它的操作屬性映射成組件methods中的一部分。構(gòu)建和執(zhí)行Actions中方法如果需要緩存整個(gè)Store對(duì)象中的State數(shù)據(jù)，可以使用pinia-plugin-persist插件，該插件是專門(mén)用于Pinia的擴(kuò)展插件，功能是將State數(shù)據(jù)保存至localStorage或sessionStorage中，默認(rèn)是以Store的i