專案使用quasar Vue init創立
我在練習登入的部分
登入會把登入資料寫入store內
然後再判斷是否有登入
目前登入後 到index.vue時 store的資料是有的
但按重新整理或是跳轉到/home
store的資料應該是消失 所以會變預設值
LoginState的值會變回false
想問是設定問題還是有哪的觀念錯誤 謝謝

index.vue跟home.vue 程式碼一樣用於測試
localhost:3000 是用json-server 當測試DB

main.js

import { boot } from "quasar/wrappers";
import { createPinia } from "pinia";
export default boot(({ app }) => {
  const pinia = createPinia();
  app.use(pinia);
});

login.js

import { defineStore } from "pinia";

export const useLoginStore = defineStore("login", {
  state: () => ({
    loginState: false,
    userInfo: [],
    permissions: 0,
    localLanguage: "zh-TW",
  }),
  getters: {
    getLoginState: (state) => state.loginState,
  },
  actions: {
    changeLoginState(bool) {
      this.loginState = bool;
    },
    changeUserInfo(info) {
      this.userInfo = info;
    },
    changePermissions(permission) {
      this.permissions = permission;
    },
  },
});

Login.vue

<template>
  <q-layout view="hHh Lpr fFf">
    <q-page-container>
      <div class="row items-center">
        <div class="col-8">
          <img
            alt="Quasar logo"
            src="~src\assets\login_bk.jpg"
            style="width: 98%; height: 100%"
          />
        </div>
        <div class="col-4">
          <div class="offset-md-3 col-12">
            <q-input
              class="loginInput"
              standout="bg-teal text-white"
              v-model="account"
              label="Account"
            />
          </div>
          <div class="offset-md-3 col-12">
            <q-input
              class="loginInput"
              standout="bg-teal text-white"
              v-model="password"
              label="Password"
            />
          </div>
          <div class="offset-md-3 col-12">
            <q-btn color="teal" @click="login">{{ $t("login") }}</q-btn>
          </div>
        </div>
      </div>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useLoginStore } from "stores/login";
import axios from "axios";
const router = useRouter();
const loginStore = useLoginStore();
const account = ref(null);
const password = ref(null);
const login = () => {
  if (checkVal(account.value) && checkVal(password.value)) {
    axios
      .get(
        `http://localhost:3000/user?account=${account.value}&password=${password.value}`,
      )
      .then((res) => {
        if (res.data.length == 0) {
          alert("登入失敗，請確認帳號密碼是否正確");
        } else {
          loginStore.changeLoginState(true);
          loginStore.changeUserInfo(res.data[0]);
          alert(t("login") + " " + t("success"));
          router.push({
            path: "/",
          });
        }
      })
      .catch((error) => {
        alert("登入失敗, Error:", error);
      });
  } else {
    alert("帳號或密碼請勿空白！");
  }
};

const checkVal = (val) => {
  var validate = true;
  if (val.length == 0) {
    validate = false;
  }
  return validate;
};
</script>

<style scoped>
.loginInput {
  width: 75%;
  margin-bottom: 10px;
}
</style>

index.vue & home.vue

<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="~src\assets\quasar-logo-vertical.svg"
      style="width: 200px; height: 200px"
    />
  </q-page>
</template>

<script setup>
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useLoginStore } from "stores/login";

const router = useRouter();
const loginStore = useLoginStore();
const { loginState, userInfo, permissions, localLanguage } =
  storeToRefs(loginStore);
if (!loginState.value) {
  router.push({
    path: "/login",
  });
}
</script>

db.json

{
  "user": [
    {
      "account": "mary",
      "name": "瑪莉",
      "email": "mary@gmail.com",
      "password": "a123",
      "id": 1
    },
    {
      "account": "Admin",
      "name": "管理者",
      "email": "mail@gmail.com",
      "password": "123456",
      "id": 2
    }
  ]
}