import{_ as s,c as i,o as a,aj as n}from"./chunks/framework.DNhrqZu5.js";const F=JSON.parse('{"title":"Pinia 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/pinia.md","filePath":"guide/vue3/pinia.md","lastUpdated":1777342606000}'),h={name:"guide/vue3/pinia.md"},k=n(`

Pinia 状态管理 ​

下一代 vuex，使用极其方便，ts 兼容好。项目使用 pinia-plugin-persistedstate 实现状态持久化。

目录结构

bash
├── store
│   ├── modules
│   │   └── user.ts
│   ├── index.ts

Options API（当前项目使用）: ​

typescript
import { loginPassword } from "@/api";
import { defineStore } from "pinia";

interface StoreUser {
  token: string;
  info: Record<any, any>;
}

export const useUserStore = defineStore("user", {
  state: (): StoreUser => ({
    token: "",
    info: {},
  }),
  getters: {
    getUserInfo(): any {
      return this.info || {};
    },
  },
  actions: {
    setInfo(info: any) {
      this.info = info ?? "";
    },
    async login() {
      try {
        const res = await loginPassword();
        this.setInfo(res);
        this.token = res.token;
        return res;
      } catch (error) {
        console.error("Login failed", error);
        throw error;
      }
    },
  },
  persist: {
    pick: ["token"],
    storage: localStorage,
  },
});

Composition API: ​

typescript
export const useUserStore = defineStore(
  "user",
  () => {
    const token = ref("");
    const info = ref<Record<any, any>>({});

    const getUserInfo = () => info.value || {};

    const setInfo = (data: any) => {
      info.value = data ?? "";
    };

    const login = async () => {
      try {
        const res = await loginPassword();
        setInfo(res);
        token.value = res.token;
        return res;
      } catch (error) {
        console.error("Login failed", error);
        throw error;
      }
    };

    return { token, info, getUserInfo, setInfo, login };
  },
  {
    persist: {
      pick: ["token"],
      storage: localStorage,
    },
  },
);

使用

html
<script lang="ts" setup>
  import { useUserStore } from "@/store/modules/user";
  const userStore = useUserStore();
  userStore.login();
</script>
`,10),p=[k];function t(l,e,E,r,d,g){return a(),i("div",null,p)}const o=s(h,[["render",t]]);export{F as __pageData,o as default};