--- tags: Vue disqus: HackMD --- # Pinia介紹 ## 大綱 - [Pinia簡介](#Pinia簡介) - [Pinia & Vuex](#Pinia&Vuex) - [Pinia架構](#Pinia架構) - [創建Store](#創建Store) ## 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寫法差異  @yu736
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up