說明口袋餐廳的表單提交前，先調整登入會員的 Pinia store 與會員登入頁面。將會員登入時的電子郵件與 id 也儲存於登入會員的 Pinia store 。

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

此篇用「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」的寫法1（將定義好的 store 賦值給變數 useLoginStore）來調整登入會員的 Pinia store。說明如下。其他寫法可參考之前寫的「Day10-試試Vue3-歡迎訊息顯示會員名(Pinia)下」、「Day11-試試Vue3-歡迎訊息顯示會員名(localStorage)」篇。

• 導出的資料增加屬性 email（字串型態，先以空字串為默認值）、 id（數字型態，先以數字0為默認值）。
• 方法中新增 updateEmail() 與 updateId() 兩個函式。當函式被調用時，如 updateEmail() 會將接收到的變數 newEmail 值賦給 this.email ，進而修改 Pinia store 中的資料狀態（即更新 name 、 email 、 id 的值）。

// 取出 Pinia 裡的 defineStore 方法
import { defineStore } from 'pinia'

// useLoginStore 是自行定義 Pinia store 的函數，之後可以通過調用它來取得 store 實例
export const useLoginStore = defineStore({
    id: 'myStore',
    state: () => ({
        name: ''
        email: '',
        id: 0,
    }),
    // actions 概念同 Vue 的 methods
    // 透過呼叫將 response 存到 state 中，所以 actions 可以用來更新 state 資料的方法
    actions: {
        updateName(newName) {
            this.name = newName;},
        updateEmail(newEmail) {
            this.email = newEmail;},
        updateId(newId) {
            this.id = newId;}
    },
})

(2)調整會員登入頁面訪問 Pinia store
路徑 src / views / front / LoginView.vue 檔案裡的 <script></script> 調整以下內容。

• data() return 增加屬性 id: 0 來接收 store 的 id。
• 表單送出按鈕檢查表單驗通過時，在 axios.get() 取得資料集後，新增一個新變數 newName 去接收資料集裡的第一個物件值。定義 newName.email 與 newName.id 屬性值為資料集的 email 與 id 。接下來就能用前一步驟建立好的 Pinia 的 updateEmail() 與 updateId() action 去更新 store 裡的 state 資料（即將取得資料集的 email 與 id 回傳到 store 裡的 email 與 id）。

<script>
...
// 在元件中引入並呼叫 useLoginStore() 來訪問 store
import { useLoginStore } from "../../components/LoginStore.js";

export default {
  data() {
    return {
      name: "",
      email: "",
      password: "",
      id: 0,
    };
  },
  methods: {
    ...
    // 表單送出按鈕
    submitOrder() {
      // 使用 Vee Validate 的 validate 函式來驗證表單
      this.$refs.form.validate().then((valid) => {
        if (valid) {
          // 驗證通過，可以提交表單
          axios
            .get(
              `http://localhost:3000/user?email=${this.email}&password=${this.password}`
            )
            .then((res) => {
              ...

              // 假設網路請求成功取得資料集
              // 變數 newName 指資料集裡的第一個物件值
              const newName = res.data[0]; 
              // 令 data() 裡的 name 為資料集的 name
              this.name = newName.name; 
              this.email = newName.email;
              this.id = newName.id;

              // 使用 Pinia 中的 updateUser action 更新 store 裡的 state 資料
              // (1)訪問 store 中的狀態和執行。這寫法是直接在方法中取得 store 實例(userStore)
              const userStore = useLoginStore(); 
              // (2)操作這實例(userStore)去調用 updateName ，將 axios.get 取得的 newName.name 更新到 store 的 name 狀態中
              userStore.updateName(newName.name); 
              userStore.updateEmail(newName.email);
              userStore.updateId(newName.id);
              ...
            })
            .catch((error) => {
              ...
            });
        } else {
          ...
        }
      });
    },
  },
};
</script>