第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