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，不用嗎?
