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