Pinia 学习指南Vue.js 的直观状态管理库

类型安全、可扩展、模块化设计

快速开始

什么是 Pinia？

在 GitHub 查看

🍍

直观易用

直观的 API，让状态管理变得简单明了。无需复杂的样板代码，专注于业务逻辑。

🔒

类型安全

完整的 TypeScript 支持，提供出色的类型推断和自动补全体验。

⚡

开发工具

强大的 Vue DevTools 支持，时间旅行调试和热重载功能。

🔧

可扩展

通过插件系统扩展 Pinia 功能，满足各种复杂需求。

📦

模块化

每个 store 都是独立的模块，支持代码分割和懒加载。

🪶

轻量级

压缩后仅约 1.5KB，对应用性能影响极小。

快速开始

安装

npmyarnpnpm

bash

npm install pinia

bash

yarn add pinia

bash

pnpm add pinia

基本用法

javascript

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

javascript

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

vue

<!-- 在组件中使用 -->
<template>
  <div>
    <p>计数: {{ counter.count }}</p>
    <p>双倍计数: {{ counter.doubleCount }}</p>
    <button @click="counter.increment()">增加</button>
  </div>
</template>

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

const counter = useCounterStore()
</script>

为什么选择 Pinia？

Pinia 是 Vue.js 的官方状态管理库，它提供了更简单、更直观的 API，同时保持了强大的功能：

🎯 简单直观：API 设计简洁，学习成本低
🔄 组合式 API 友好：完美支持 Vue 3 的组合式 API
📱 SSR 支持：服务端渲染开箱即用
🧪 易于测试：每个 store 都可以独立测试
🔌 插件生态：丰富的插件生态系统

Pinia 学习指南Vue.js 的直观状态管理库

直观易用

类型安全

开发工具

可扩展

模块化

轻量级

快速开始 ​

安装 ​

基本用法 ​

为什么选择 Pinia？ ​

快速开始

安装

基本用法

为什么选择 Pinia？