Pinia — Vuex的繼承者

近期一直在前端社群裡看到有人在討論 pinia，讓人不禁好奇 pinia 到底是何方神聖  ? 為甚麼越來越多人開始使用 pinia? 翻了一下 pinia 的官網，才知道 pinia 是輕量級的狀態管理套件，支援 vue2 和 vue3，對 typeScript 有更好的相容性，因此被視作下一代的 vuex，剛好最近在做一個 sideProject，就趁這個機會來試玩一下 pinia，看是否真如大家說的那麼好上手

以下的範例均使用 vue3 來實作

Pinia 初體驗

先安裝 pinia

yarn add pinia

# or with npm
npm install pinia

如果是用 vue2 開發，要記得先安裝@vue/composition-api

npm install pinia @vue/composition-api

安裝完畢之後先在 main.js 做初始設定，引入 pinia

接下來新增 store 資料夾(該步驟非必要，看個人開發習慣)，由於 pinia 支援創建多個 store，因此可以依照自己的需求拆分成多個檔案，因為目前要存放的資料比較單純，所以只需要新增一隻 index.js

接著在 store/index.js 裡面定義 store，defineStore 需傳入兩個參數，第一個是 store 的名稱，該名稱必須是唯一的，第二個參數是設定檔物件，會發現只剩下 state、getters、actions，沒有 mutations 了，因為 action 可以做同步和非同步的操作，如果曾經寫過 vuex 的人，應該可以明顯感受到 pinia 的結構又變得更加簡化了!

• state: 類似 component 的 data，定義初始資料
• getters: 類似 component 的 computed，可以根據 state 做響應式的資料處理
• action: 類似 component 的 methods，可以寫同步和非同步的 function，如果要在 action 裡面取得 state，可以用 this.xxx 來取得，要特別注意，actions 裡面的函式不可以寫成箭頭函式，不然會取不到正確的 this

元件內呼叫 action 方法

在 component 內部如果要呼叫 action 方法，寫法如下

• 引入 useStore
• 呼叫 useStore 會回傳一個物件(store)
• 透過 store 呼叫 action 方法

元件內取 state

如果要在 component 裡面取得 state 的值可以怎麼做呢? 假設要取得 store 的 info 可以有兩種作法:

方法 1: store.info

方法 2: storeToRefs()

如果直接對 store 解構取出需要的 state， ex . const { info } = store，就會發生明明 store 的 info 已經修改了，但還是取到舊的值的情形，所以要用 storeToRefs 將解構出來的值轉成 ref，才不會失去響應式的效果

修改 state

沒有 mutations 的存在，意謂著我們可以直接修改 state 了  ! 不過看了一些文章還是建議使用 action 來做修改，避免發生不必要的意外，假如需要一次修改多個 state，可以用 store.$patch來修改，$patch 方法可以傳入函式或是物件

pinia 跟 vuex 一樣，開發時均能搭配 vue devtool 查看數據

一開始以為 pinia 和 redux 一樣可以用在其他框架，想不到居然是 vue 限定，真是太可惜了，用過 pinia 之後真的會回不去，寫法更簡潔，用起來更順手，我認為跟 vuex 比起來，pinia 對新手更加友善，因此之後如果有寫到 vue 的專案，應該都會改用 pinia 來開發，好 pinia，不用嗎?