前言

pinia大致上會做的事情（只有文字沒有示例）。

Pinia

Pinia是什麼

• 是一種狀態管理工具
• 是 vue 的共用儲存區
• 同時適用於 vue2、vue3 兩版本

A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end.

我對官方解釋「Pinia名字由來」的解釋：鳳梨的果實類型是複合果。鳳梨表皮上每一個方形框框（或菱形框框）（像鱗片的地方）（稱為果目），原本都生長著一朵小花，果實越成熟才發展成我們所見，一顆完整的果實。官網將 Pinia 比喻成一顆鳳梨，鳳梨上每個 store （果目）是獨立產生的，但最終都會相連（都長在同顆果實上）。

使用情況

小專案（例如 5-10 個 components、沒有全域共用的狀態）可以不用；反之較大的、會需要多個全域共用的變數，就可以考慮使用 Pinia。

Store

Store是什麼

需要在不同頁面中共用的變數放的地方。

Vue3 的狀況下，放在 store 的變數，在vue檔或js檔(css或其他之類的也可以嗎)經引入後，就可以一起共用。

Store的三個概念：state, getters and actions

在這邊將此概念比喻為共同編輯線上 Google 文件。

想像情境，同組的A同學和B同學，要做一份期中報告：A同學在登入Google 帳號看到檔案後，編輯了線上的作業，換B同學接手、登入帳號後，也可以直接得到被A同學修改過的內容，並加以編輯。

在情境中，A同學和B同學是兩個不同的頁面/組件，而始終存在的文件相當於放在 store 中（state），登入Google 的程序就是在引入變數到這個頁面/組件中（getters），且AB同學各自都能修改線上文件（actions）。

Store的使用時機

需要讓多個頁面都能取得的數據、共用較複雜的數據時。

不是每個專案都需要有全域狀態的變數。

補充

如何引入、使用 Pinia，一方面是已經很多地方有了，一方面是自己會做了但還沒有那麼有東西能講。有機會的話下次來挑戰~

參考

https://www.tpisoftware.com/tpu/articleDetails/2844
https://vueschool.io/lessons/introduction-to-pinia?friend=vuerouter&utm_source=pinia&utm_medium=link&utm_campaign=homepage
官網 https://pinia.vuejs.org/