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

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

1.Store (存储仓库)

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

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

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }), // State
  getters: { doubled: (state) => state.count * 2 }, // Getter
  actions: { 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