假设您想用pinia实现登录逻辑，下面是一个基本的示例：
stores/user.js

import { defineStore } from "pinia";
export const useStore = defineStore("user", {
  state: () => ({
    user: null
  }),
  actions: {
    login(user) {
      this.user = user;
    }
  }
});

Home.vue

<template>
  <h1>home</h1>
  <h2 v-if="user">Hello, {{ user.firstName }} {{ user.lastName }}</h2>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useStore } from "@/stores/user";

const store = useStore();

const user = computed(() => {
  return store.user;
});
</script>

Login.vue

<template>
  <div>
    <form @submit.prevent="submit">
      <input type="text" id="firstName" v-model="firstName" />
      <input type="text" id="lastName" v-model="lastName" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useStore } from "@/stores/user";
import { useRouter } from "vue-router";

const firstName = ref("");
const lastName = ref("");
const store = useStore();
const router = useRouter();

const submit = () => {
  let user = {
    firstName: firstName.value,
    lastName: lastName.value,
  };

  store.login(user);
  router.push("/");
};
</script>

在router.js中，如果用户未通过身份验证，您可以添加防护以重定向登录页面：

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import Login from "@/views/Login.vue";
import { useStore } from "@/stores/user";
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/login",
    name: "Login",
    component: Login
  }
];

const router = createRouter({
  history: createWebHistory("/"),
  routes
});

router.beforeEach((to, from, next) => {
  const store = useStore();
  const isAuthenticated = store.user !== null;

  if (to.name !== "Login" && !isAuthenticated) {
    next({ name: "Login" });
  } else {
    next();
  }
});

export default router;