分享寫「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」時整理幾種其他歡迎訊息顯示會員名的寫法，及從中學到的新知識點。會分兩篇介紹。

(1)登入會員的 Pinia store
路徑 src / components / LoginStore.js 。

第9篇在 store 寫法 export const useLoginStore = defineStore({id: 'myStore'...}) 是將定義好的 store 賦值給變數 useLoginStore （名稱可自行定義，作為 Pinia store 的函數）。可以在其他檔案引用 useLoginStore 這個變數來取得 store 實例。稱它為第1種寫法。

第2種寫法 const useLoginStore = defineStore('myStore', {...}) 。這個專案如果只寫這句在 Visual Studio 會顯示「 useLoginStore 已宣告但從未讀取其值」的錯誤提醒，因會員登入頁面（LoginView.vue）需調用 store 存放的資料，必須導出 useLoginStore 才行。所以這個錯誤不能忽略，解決辦法是末了加上export { useLoginStore };。完整寫法為const useLoginStore = defineStore('myStore', {...}) export { useLoginStore };

結論是第1、2種寫法意思相同都是將定義好的 store 賦值給變數 useLoginStore 。

第3種寫法是參考六角學院 export default defineStore('myStore', {...}) 。這種寫法是默認導出 store ，因為默認所以不需要將其賦值給一個變數，與前面第1、2種寫法些微不同。

(2)會員登入頁面訪問 Pinia store
路徑 src / views / front / LoginView.vue 。

第1、2、3種寫法在 <script></script> 開頭引用 store 方式有些不同。
第1、2種寫法是 import { useLoginStore } from "../../components/LoginStore.js"; 。需要使用 {} 語法導入 store 。
第3種寫法是 import useLoginStore from "../../components/LoginStore.js"; 。可以直接導入默認的 store 實例。

(3)會員主頁顯示會員名
路徑 src / components / MainView.vue 。

第1、2、3種寫法在 <script></script> 開頭引用 store 不同的說明同上一節，其餘均相同。

(4)心得
回想以往學習 Pinia 時，傾向用範例來記錄。參加鐵人賽做這個專案前未碰到第9篇訪問 store 的情境，寫這段 Pinia store 語法花了點時間查資料，試過好幾種寫法，到處碰壁後終於成功。實在很開心，分享給各位讀者嘗試成功的方法及其差異。