[官方文档地址](https://pinia.vuejs.org/zh/core-concepts/)Pinia (发音为 /piːnjʌ/，类似英文中的 “peenya”)# 目录结构
├── store/ 状态管理目录│ ├── index.ts 状态管理入口（用于注册modules内所有模块文件）│ └── modules/ 状态模块目录（用于管理项目内的store模块）│ ├── layout-store.ts 布局状态模块│ └── user-store.ts 用户状态模块
# 简单应用
## module内的user-store.ts代码封装
import { store } from "@/store";import { ref } from "vue";import { defineStore } from "pinia";import { UserInfo } from "@/types/user";import { UserInfoEnum } from "@/enums/userInfo/user-info-enum";export const useUserStore = defineStore("user", () => { // 用户信息 const userInfo = ref<UserInfo>(UserInfoEnum); const setUserInfo = (val: UserInfo) => { userInfo.value = val; }; const getUserInfo = () => { return userInfo.value; }; return { userInfo, setUserInfo, getUserInfo, };});/** * 在组件外部使用UserStore的钩子函数 * @see https://pinia.vuejs.org/core-concepts/outside-component-usage.html */export function useUserStoreHook() { return useUserStore(store);}
## 业务页面使用
<template> <divclass="header-user">{{ userInfo.username }}</div></template><scriptsetuplang="ts">import { useUserStore } from "@/store/modules/user-store";import { computed } from "vue";const userStore = useUserStore();const userInfo = computed(() => userStore.userInfo);console.log(userStore)</script>
