前言

我們已經知道元件與元件之間的溝通可以使用 props 與 emits，不過這東西就只能設定兩個元件溝通的狀態。

如果我們的元件樹的結構長得比較複雜一點，尾端的元件如果要將狀態傳回根元件，就必須一層一層又一層的傳遞狀態，單一一個狀態可能已經很麻煩了，要是各種狀態需要交互運作，那將會一場維護上的災難。

為此 Vue 提供了一個狀態管理工具：Vuex。這個狀態管理工具隨著版本的演進，更變了他的名稱叫做 Pinia，Logo 是一顆大鳳梨。

長得頗為可愛 XD

這篇文章預計要紀錄我們該怎麼在 Vue 中使用這顆大鳳梨

安裝大鳳梨

要使用大鳳梨，第一步就是先安裝他，一樣可以使用 npm 或是 yarn

npm install pinia

yarn install pinia

建立大鳳梨的實體

如同 createApp 與 createRouter 那樣，我們也需要建構這顆大鳳梨的實體，建立實體的方法，是 'pinia' 引入的 createPinia 方法

import { createPinia } from "pinia";

建構實體與引用實體：

// 建立大鳳梨實體
const pinia = createPinia();

// 建立 Vue 實體
const app = createApp(App);
// 在 Vue 實體中使用大鳳梨
app.use(pinia);
app.mount("#app");

這個寫法也可以用 「串」 的：

createApp(App).use(pinia).mount("#app");

如果覺得建構實體、引用實體兩個行為要分開寫很麻煩，也可以直接把他們寫在一起：

const app = createApp(App);
app.use(createPinia());
app.mount("#app");

大鳳梨的狀態管理觀念

事實上 Pinia 語法跟 Vue 一樣，區分為 Option 與 Setup 兩種語法，筆者認為寫起來最優雅的會是 Setup 語法，而且他的寫法幾乎與 <script setup> 內容一樣，不用特別為了要使用 Pinia 而特別去記兩套語法。

不過由於 Pinia 官網中幾乎都是使用 Option 語法當範例，所以還是蠻有機會遇到跟著官網使用 Option 語法的團隊，為此我們可以用 Option 語法使用的專有名詞來對應到 Setup 語法中

接下來要使用的語法都會是 Setup 語法，不過帶到 Option 的專有名詞。

Store 儲存庫

要建立一個全域的狀態管理工具，需要有一個 Store 儲存庫，可以把他想像成一個倉庫，專門管理「某部分」的商業邏輯。

一個 Vue 專案的 Store 不一定只有一個，可以根據需求建立多個儲存庫，以達到好維護的狀態管理效果。

要定義一個儲存庫，一般我們會在 src 資料夾中新增一個 store 資料夾，並且建立一個預設資料夾 index.js：

在 js 檔案中透過 pinia 引入 defineStore 方法：

import { defineStore } from "pinia";

我們要在這個方法中定義兩個參數，一個是 store 名稱，另一個是 callback。

第二個參數的內容，就是 Option Store 與 Setup Store 的差異所在，有興趣的讀者可以直接參考 Pinia 官網

export const useBookStore = defineStore("book", () => {
  // store 其他邏輯
});

store 第一個參數的名稱會被當成 ID，Pinia 會把他用來連結 devTools。

defineStore 會有一個回傳值，一樣可以任意命名，不過官方建議這個名稱以 use... 開頭為命名風格，且之後要使用這個 store，都會在程式中用這個命名引入。

State

State 狀態，就是對應到 Vue 的 ref()。
其用法就跟之前在 Vue 裡面使用 ref() 一樣，該引入的要引入，該使用 .value 就使用。
唯一要注意的小地方是，在 Store 中使用的「變數」，記得都要 return 出來，之後才有辦法使用。

基本上，state 同時也代表著 store 的核心內容。

import { ref } from "vue";
export const useBookStore = defineStore("book", () => {
  const books = ref([
    { id: 1, title: "0 陷阱！0 誤解！8 天重新認識JavaScript！" },
    { id: 2, title: "重新認識Vue.js: 008 天絕對看不完的Vue.js 3.0 指南" },
    {
      id: 3,
      title:
        "D3.js資料視覺化實用攻略：完整掌握Web開發技術，繪製互動式圖表不求人",
    },
  ]);
  return { books };
});

Getter

既然 ref() 代表 State ，那麼 Getter 就是 computed() 了。

在 Pinia 中， Getter 完全等同於 State 的 computed()。
如果看不懂什麼叫「State 的 computed()」的話，可以回頭想想 computed() 在 Vue 扮演的腳色，他是一個用來以狀態 (State) 產出狀態 (State) 的工具，後者會是前者的「計算值」，所以才會說「Getter 代表 State 的 computed()」

在 Store 使用 Computed 的時候一樣，該引入的時候要引入，寫完之後記得要 return 出來。

import { ref, computed } from "vue";
export const useBookStore = defineStore("book", () => {
  const books = ref([
    { id: 1, title: "0 陷阱！0 誤解！8 天重新認識JavaScript！" },
    { id: 2, title: "重新認識Vue.js: 008 天絕對看不完的Vue.js 3.0 指南" },
    {
      id: 3,
      title:
        "D3.js資料視覺化實用攻略：完整掌握Web開發技術，繪製互動式圖表不求人",
    },
  ]);
  // getter
  const hasBook = computed(() => books.value.length > 0);
  // 記得要 return
  return { books, hasBook };
});

Action

有了 狀態，有了 計算值，當然也少不了「方法」。
Action 就是這個 method ，他的用法就跟 Vue 中使用 「方法」的方式一樣，定義一個函數就搞定了。

import { ref, computed } from "vue";
export const useBookStore = defineStore("book", () => {
  const books = ref([
    { id: 1, title: "0 陷阱！0 誤解！8 天重新認識JavaScript！" },
    { id: 2, title: "重新認識Vue.js: 008 天絕對看不完的Vue.js 3.0 指南" },
    {
      id: 3,
      title:
        "D3.js資料視覺化實用攻略：完整掌握Web開發技術，繪製互動式圖表不求人",
    },
  ]);
  const hasBook = computed(() => books.value.length > 0);

  // action
  const plusBook = () => {
    books.value.push({
      id: books.value.length + 1,
      title: "New Book",
    });
  };
  // action
  const deleteBook = () => {
    books.value.pop();
  };

  // 一樣記得要 return
  return { books, hasBook, plusBook, deleteBook };
});

使用 Store

要使用 Store ，在需要元件中引入當初對 Store 回傳值的命名 useXXXStore 即可直接使用：

import { useBookStore } from "./store";
const store = useBookStore();

接著就可以使用這個 store 定義的 state、 getter 、action

<button @click="store.plusBook">新增一本書</button>
<ul>
  <li v-for="book in store.books" :key="book.id">{{ book.title }}</li>
</ul>

<div>是否有書 : {{ store.hasBook ? "是" : "否"}}</div>

補充：在大鳳梨中使用 watch

我們也可以在 defineStore 的 callback 內容中，使用 watch 監聽 state 的變化，使用方式就跟一般的 watch 寫法一樣：

import { defineStore } from "pinia";
import { ref, computed, watch } from "vue";

export const useBookStore = defineStore("book", () => {
  const books = ref([
    { id: 1, title: "0 陷阱！0 誤解！8 天重新認識JavaScript！" },
    { id: 2, title: "重新認識Vue.js: 008 天絕對看不完的Vue.js 3.0 指南" },
    {
      id: 3,
      title:
        "D3.js資料視覺化實用攻略：完整掌握Web開發技術，繪製互動式圖表不求人",
    },
  ]);

  const hasBook = computed(() => books.value.length > 0);

  const plusBook = () => {
    books.value.push({
      id: books.value.length + 1,
      title: "New Book",
    });
  };

  const deleteBook = () => {
    books.value.pop();
  };

  // 在 Pinia 中使用 watch
  watch(
    books,
    (val) => {
      // 當書本資料發生變化時，將資料存入 localStorage
      localStorage.setItem("piniaState", JSON.stringify(val));
    },
    { deep: true }
  );

  return { books, hasBook, plusBook, deleteBook };
});

後記

這篇文章主要是在記錄 Pinia 的語法，範例程式的邏輯或許直接寫在 component 也可以達到一樣的效果。

不過使用 Pinia 的一個優點是，如果有多處元件都需要更改狀態的話，我們可以在大鳳梨中定義好「更改狀態的邏輯方法」，在需要的地方中引入方法後，即可達成這個需求，不用再單獨對各個元件定義 props 與 emits。畢竟寫 code 這種事情，多寫一個地方代表要多維護一個地方，能在單一位置處理好一套邏輯持續複用，才能讓我們的程式更優雅。

同時根據官方教學所說的，無論我們在開發大專案或是小專案，都很適合直接引入 Pinia 進行開發，畢竟他其實也沒什麼副作用。