DAY 15 - 輕鬆入門 Pinia 狀態管理工具

Pinia 狀態管理工具

接著我們來嘗試運用 Pinia 狀態管理工具，Pinia 官方文件也有提供完整教學也可以去看。

安裝篇 (會的可以跳過

第一次安裝 直接加入 Pinia

• npm create vue@latest 創建專案
• Add Pinia for state management? yes
  

安裝至 Nuxt3 專案

• npm install pinia @pinia/nuxt
• 在 nuxt.config.js 文件的 modules 加入 pinia/nuxt

概念篇 / 使用情境

狀態管理工具在初學上最困難的不是如何使用，而是不瞭解為何要使用及使用情境，在初學雖然我會了 pinia ，但是完全無法理解為何要使用跟狀態的運用，對元件溝通技巧更是不理解， 所以學了也是不會使用 = 不會，所以前面我花了蠻多在介紹狀態及狀態管理工具讓大家會更好理解。

下面再搭配這兩張圖，可以看到 Pinia 這類狀態管理工具就像共用資料庫的概念，當我們需要跨元件溝通或是常用的狀態，就可以將它獨立變成 store ，當有需要再取出，也避免元件傳來傳去困擾。

基礎篇 / 如何使用

安裝完 Pinia 後會看到資料夾多了一個 stores，這邊就是我們的狀態管理庫，狀態會統一集中在這邊管理

第一步 、 定義你的 Store - 建立你的 store 名稱

• 在你的 stores下建立一個 js檔，我們需要在裡面先建立store
• 先匯入 import { defineStore } from 'pinia'
  

第二步、定義 state、getters、actions

這是什麼 !? state、getters、actions 對應 ref、computed、methods，別慌!只是名稱不同而已。

• export const 命名 store 名稱 useCounterStore
• 再 store 裡定義你的 state、getters、actions，這邊我寫了一個count、計算雙倍 doubleCount、count+1的方法increment
  

第三步、取出 useCounterStore 裡定義的 state、getters、actions

• import 匯入useCountstore ，寫入 store
• 使用 Store 裡的 state、getters、actions (跟一般代入資料一樣)

成功寫入 !! 來看看畫面

今天 Pinia 教學就到這邊結束了，只要了解概念及基礎運用，接下來就可以活用在各式各樣專案中，上面教的寫法是 Setup Store寫法，還有另種寫法是 Option Store 寫法，其實概念上都一樣，可以挑喜歡的寫法寫就好，官方也有提供寫好的範例參考(Option Store) ，想深入了解更實作的運用也可以參考官方