Pinia Vue 状态管理完全教程：用 Vue 3 写出可维护的全局状态

一、原理背景

当 Vue 3 项目只有一个组件时，数据用 ref/reactive 就够了；但真实项目里，登录用户信息、购物车、多语言、主题要在「很多互不相关的组件」之间共享。这时候把状态层层 props 传下去会失控——这就是状态管理要解决的问题。

Pinia 是 Vue 官方推荐的状态管理库（Vuex 的继任者），理念是「一个 Store 就是一个独立的状态容器」。它的设计原则：

  • 单一数据源：每个 store 集中管理一类状态，组件想用直接 useXxxStore() 拿，不再层层透传。
  • 去中心化：你可以建多个 store（user、cart、theme），互不干扰，比 Vuex 的单一大 store 更易维护。
  • TS 友好 + 极简 API：没有 Vuex 的 mutations 概念，改状态直接在 action 或组件里赋值，心智负担小。

一句话：Pinia 让「跨组件共享、可预测、好调试」的状态变得简单。

二、分步操作

步骤 1：创建项目并安装

npm create vite@latest myapp -- --template vue
cd myapp && npm install
npm install pinia

步骤 2：在 main.js 挂载 P

🔒 付费文档

支付 5 积分后即可解锁全部内容