Pinia 核心概念详解：Store, State, Getter, Action

一、核心概念定义与示例代码

1.Store (存储仓库)

Pinia 的核心容器，用于管理全局状态和业务逻辑：

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }), // Stategetters: { doubled: (state) => state.count * 2 }, // Getteractions: { increment() { this.count++ } } // Action
})

2.State (状态)

存储应用数据的响应式对象：

state: () => ({count: 0,user: { name: 'Alice', age: 30 }
})

• 特点：类似 Vue 组件的 data

• 修改方式：

// 直接修改
const store = useCounterStore()
store.count = 5// 批量修改 ($patch)
store.$patch({ count: 10, user: { ...store.user, age: 31 } })

3.Getter (计算属性)

基于 State 派生的计算值（带缓存）：

getters: {// 基础用法upperCaseName: (state) => state.user.name.toUpperCase(),// 访问其他 gettergreeting: (state) => {return `Hello, ${this.upperCaseName}!` }
}

• 特性：

  • 自动推导类型（TS）

  • 通过 this 访问整个 store 实例

4.Action (操作方法)

处理同步/异步业务逻辑：

actions: {async fetchUser(userId) {try {const res = await api.getUser(userId)// 修改 statethis.user = res.data } catch (error) {console.error('Fetch failed:', error)}}
}

• 特性：

  • 支持异步操作

  • 通过 this 直接访问 state/getters

  • 可组合多个 action

二、核心概念关系图解

三、完整示例代码

<!-- Component.vue -->
<script setup>
import { useCounterStore } from '@/stores/counter'const store = useCounterStore()
</script><template><div><!-- State 使用 --><p>Count: {{ store.count }}</p><!-- Getter 使用 --><p>Doubled: {{ store.doubled }}</p><!-- Action 调用 --><button @click="store.increment()">+1</button><button @click="store.fetchUser(123)">Load User</button></div>
</template>

四、核心特性对比表

概念	类型	是否可异步	典型用途	响应式	缓存
State	数据对象	❌	存储原始数据	✅	❌
Getter	计算属性	❌	派生状态/复杂计算	✅	✅
Action	函数方法	✅	业务逻辑/API 交互	❌	❌
Store	容器实例	-	整合 state/getter/action	-	-

五、总结

1. Store 是状态管理的核心容器，通过唯一的 ID 注册

2. State 是响应式数据源，推荐使用 $patch 进行批量更新

3. Getter 提供高效的计算属性，自动缓存结果避免重复计算

4. Action 封装业务逻辑代替 Vuex 的 mutations+actions

5. 设计优势：

   • 完整的 TS 类型推断

   • 模块化设计（支持多个 store）

   • 组件内直接修改 state 的简易性

   • 取消 mutations 简化操作流程