HackMD
Pinia介紹
大綱
Pinia簡介
- 可跨元件/頁面共享狀態
- 支援Vue2和Vue3
- TypeScript支援
- Actions 支援同步和非同步
- 移除了Mutations
Pinia&Vuex
Pinia架構
安裝
掛載
創建Store
CPMPF/src/ store
定義Store
引入defineStore
Store ID
Store ID 必須為唯一值
如果ID 重複，在同一個Vue元件/ TS
檔裡定義Store 實例變數的時候，會以
先定義的為有效值，後續定義的store不
會覆蓋先前定義的store
Store範例
元件引入Pinia
取用state
Components引入完
此時store已經是proxy的格式，直接”userStore.”就可以取出變數或方法
storeToRefs 解構
- 透過解構來生省略用時”userStore.”的字眼
- state、getters需透過pinia的storeToRefs方法來解構(若用一般方法解構會失去響應式的功能)
- Store裡的function可以用一般解構方式解構
$reset初始化
$patch 批量修改(物件形式)
- 以賦值的方式來修改值
- $patch須帶入一個物件，物件裡寫欲修改的變數與值
- 可修改一至多個變數
$patch 批量修改(函數形式)
- 可以對引用的變數加以修改
- 可修改一至多個變數
$subscribe 訂閱
- 監聽state的變化
- 若state有被修改則會觸發$subscribe
Store寫法差異
