Vue 3 集成 Pinia 实现全局状态管理只需三步：安装（npm/yarn/pnpm install pinia，体积约1KB）、挂载（main.js/ts 中 createPinia() 并 app.use()）、定义使用 Store（defineStore 声明，storeToRefs 解构保响应性）。
Vue 3 项目集成 Pinia 实现全局状态管理，核心就三步：安装、挂载、定义并使用 Store。整个过程轻量直接，没有冗余配置，也不需要理解 mutations 这类历史概念。
安装 Pinia
在项目根目录执行对应包管理命令：
- npm install pinia
- yarn add pinia
- pnpm add pinia
Pinia 体积仅约 1KB，无运行时依赖，安装后即可开用。
在 main.js 或 main.ts 中挂载
创建 Pinia 实例，并通过 app.use() 注入应用上下文，使所有组件可访问：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
<p>const app = createApp(App)
const pinia = createPinia()
app.use(pinia) // 关键：全局挂载
app.mount('#app')
这一步完成后，Pinia 就已激活，支持 DevTools 调试、时间旅行、状态快照等能力。
定义一个 Store（组合式写法）
在 src/stores/ 下新建文件（如 counterStore.ts），用 defineStore 声明：
import { defineStore } from 'pinia'
<p>export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: 'Pinia 示例'
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++ // 直接修改，无需 mutation
}
}
})
注意：store 名称（第一个参数）必须唯一，用于 DevTools 识别和 SSR 区分；导出函数名推荐以 use 开头，符合组合式 API 风格。
在组件中使用 Store
推荐配合 storeToRefs 解构响应式属性，避免丢失响应性：
<script setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counterStore'
<p>const counterStore = useCounterStore()
const { count, doubleCount } = storeToRefs(counterStore) // ✅ 响应式解构</p><p>function handleClick() {
counterStore.increment()
}
</script></p><p><template>
<div>
<p>当前值：{{ count }}</p>
<p>两倍值：{{ doubleCount }}</p>
<button @click="handleClick">+1</button>
</div>
</template>
不使用 storeToRefs 直接解构（如 const { count } = counterStore）会导致响应性丢失——这是新手最常踩的坑。
