Vue.js 超詳細(xì)入門與項目實(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ò)展插件知識目標(biāo)教學(xué)目標(biāo)理解和掌握Pinia模塊安裝的方法掌握Pinia對象實(shí)例創(chuàng)建和配置的過程理解掌握Pinia各組成部分的構(gòu)建和訪問知識點(diǎn)預(yù)覽#節(jié)知識點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用10C10-01Pinia介紹1、安裝和配置Pinia

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

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

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

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

構(gòu)建和訪問State

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

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

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

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

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

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

構(gòu)建和訪問Getters

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

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

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