Pinia - Vue 状态管理 #

为什么选择 Pinia？ #

与 Vuex 对比 #

特性 Pinia Vuex
学习曲线 低 中
代码量 少 多
TypeScript 原生支持 需额外配置
模块化 自动，无需嵌套 需要手动配置 modules
mutations 无，直接修改 必须通过 mutations
DevTools 完整支持 完整支持
Vue 版本 Vue 2 & 3 Vue 2 & 3

核心优势 #

text 
Pinia 核心优势
├── 简洁 API ──────── 只有 state、getters、actions
├── 完整类型推断 ──── TypeScript 开箱即用
├── 模块化设计 ────── 每个 store 独立，无需嵌套
├── 无 mutations ──── 直接修改状态或通过 actions
├── 支持 Vue 2/3 ──── 统一的 API
├── DevTools ──────── 完整的调试支持
└── 插件系统 ──────── 可扩展性强

学习路线 #

第一阶段：基础入门 #

适合零基础开发者，学习 Pinia 的核心概念和基本语法。

第二阶段：Store 定义 #

学习如何定义和使用 Store。

第三阶段：组合式API #

学习使用组合式 API 风格定义 Store。

第四阶段：高级特性 #

掌握 Pinia 的高级功能。

第五阶段：最佳实践 #

学习企业级开发规范和技巧。

第六阶段：Vuex 迁移 #

从 Vuex 迁移到 Pinia。

快速预览 #

一个简单的计数器 #

ts 
// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})
vue 
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">+</button>
    <button @click="counter.decrement">-</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

组合式 API 风格 #

ts 
// stores/counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  return { count, doubleCount, increment, decrement }
})

技术栈概览 #

text 
Pinia 技术栈
├── Pinia 2.x           核心状态管理库
├── Vue 3.x             基础框架
├── Vue DevTools        调试工具
├── TypeScript          类型支持（推荐）
└── pinia-plugin-persistedstate  持久化插件（可选）

前置知识 #

学习本指南前，建议具备以下基础：

  • HTML/CSS 基础
  • JavaScript ES6+ 语法
  • Vue 3 基础知识
  • 组合式 API 基础（可选）
  • 基本的命令行操作

学习建议 #

  1. 循序渐进：按照章节顺序学习，打好基础
  2. 动手实践：每学完一章，动手编写代码
  3. 对比学习：与 Vuex 对比理解，加深认识
  4. 项目驱动：通过实际项目巩固知识

版本说明 #

本指南基于 Pinia 2.x 编写，推荐使用最新稳定版本。

版本 状态 说明
Pinia 2.x 推荐 最新版本，支持 Vue 2 & 3
Pinia 1.x 维护 旧项目维护使用

开始你的 Pinia 学习之旅吧！

最后更新：2026-03-28