Pinia 是 Vue 的官方状态管理库（Vuex 的继任者）— 一个用于存储需要在许多组件间共享的状态的集中式 store，拥有构建在 Composition API 之上的简洁、类型安全的 API。
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
这个"setup store"看起来完全像一个 composable — 状态用 ref、getters 用 computed、actions 用函数 — 如果你熟悉 Composition API，这会很直观。
<script setup>
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { count, double } = storeToRefs(store); // keep state reactive when destructured
const { increment } = store; // actions can be destructured directly
</script>
<template>
<button @click="increment">{{ count }} (x2 = {{ double }})</button>
</template>
重要： 在解构 state/getters 时使用 storeToRefs — 普通的解构会破坏响应式（与 reactive 有相同的响应式警告）。Actions 不需要它。
✓ No mutations boilerplate — actions can mutate state directly
✓ Excellent TypeScript inference (Vuex was painful to type)
✓ Modular by design — many small stores, no nested-module complexity
✓ Composition-API-native, tiny API, devtools support
props/emits → parent ↔ child
provide/inject → share within a subtree
Pinia store → GLOBAL/app-wide shared state (auth user, cart, settings)
accessed by many unrelated components
Pinia 是 Vue 应用中 全局、共享状态 的标准解决方案 — 用户/认证、购物车、应用设置、缓存数据 — 任何许多距离较远的组件都需要一致地读取和更新的内容。
它的 composable 风格 API、一流的 TypeScript 支持以及缺乏 Vuex 的样板代码使其成为推荐的选择。
知道何时应该使用它（而不是 props/inject）当状态真正是全局的时，以及在解构时使用 storeToRefs 来保持响应式，这是正确使用它的核心。