在 Vue 3 生态中，**Pinia** 已经成为 Vue 官方推荐的状态管理工具，它比 Vuex 更轻量、简洁、类型友好。
本文将带你深入理解 **Pinia 的核心概念：State、Getters、Actions**，并结合示例，帮你快速掌握如何在项目中使用。

---

## 1. 为什么选择 Pinia？

在 Vue 2.x 时，开发者普遍使用 Vuex 进行全局状态管理。但随着 Vue 3 的发布，开发团队也推出了 Pinia 作为新一代状态管理方案。它的优势包括：

* API 设计直观，和 Vue 组合式 API 完美结合；
* 支持 **模块化拆分**，逻辑更清晰；
* 内置 **TypeScript 支持**，类型推导更友好；
* 更加轻量，学习成本低。

如果你熟悉 Vuex，可以把 Pinia 理解为 “Vuex5 的提前实现版本”。

---

## 2. Pinia 核心概念

Pinia 的使用围绕三个核心概念展开：

1. **State** —— 定义全局数据源；
2. **Getters** —— 对 state 的派生数据（类似计算属性）；
3. **Actions** —— 封装业务逻辑和异步操作。

我们逐一来解析。

---

### 2.1 State —— 全局状态

State 就是我们存储全局数据的地方。使用 `defineStore` 定义一个仓库（store）时，可以通过 `state` 来声明。

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

export const useCounterStore = defineStore('counter', {
  // state 必须是一个函数
  state: () => ({
    count: 0,
    name: 'Pinia 学习'
  })
})
```

在组件中使用：

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

const counter = useCounterStore()

// 修改状态
counter.count++
</script>

<template>
  <div>
    <p>计数：{{ counter.count }}</p>
    <p>名称：{{ counter.name }}</p>
  </div>
</template>
```

✅ **要点：**

* `state` 必须是函数，避免跨组件共享引用问题；
* 直接通过 `store.xxx` 读写即可，不需要 `commit`/`dispatch`。

---

### 2.2 Getters —— 派生数据

Getters 相当于 **计算属性**，可以基于 state 派生出新的值。

```javascript
// stores/counter.js
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    // 可以使用 this 获取其他 getter 或 state
    tripleCount() {
      return this.count * 3
    }
  }
})
```

组件中使用：

```html
<template>
  <div>
    <p>原始值：{{ counter.count }}</p>
    <p>双倍：{{ counter.doubleCount }}</p>
    <p>三倍：{{ counter.tripleCount }}</p>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>
```

✅ **要点：**

* Getters 可以像属性一样直接访问；
* 可基于 state 或其他 getters；
* 内部可使用 `this` 访问 store。

---

### 2.3 Actions —— 封装逻辑和异步操作

Actions 用于封装修改 state 的逻辑，可以是同步或异步操作。它类似于 Vuex 的 `actions`，但同时也可以直接修改 state（更灵活）。

```javascript
// stores/counter.js
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    async fetchCount() {
      const data = await new Promise(resolve => {
        setTimeout(() => resolve(10), 1000)
      })
      this.count = data
    }
  }
})
```

组件中使用：

```html
<template>
  <div>
    <p>计数：{{ counter.count }}</p>
    <button @click="counter.increment">+1</button>
    <button @click="counter.fetchCount">获取数据</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>
```

✅ **要点：**

* Actions 可以修改 state；
* 支持异步操作（如请求接口）；
* 在组件中直接调用即可。

---

## 3. 综合示例：Todo List

下面通过一个小例子来整合 **State、Getters、Actions**：

```javascript
// stores/todo.js
import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todo', {
  state: () => ({
    todos: []
  }),
  getters: {
    doneTodos: (state) => state.todos.filter(todo => todo.done),
    undoneTodos: (state) => state.todos.filter(todo => !todo.done)
  },
  actions: {
    addTodo(text) {
      this.todos.push({ text, done: false })
    },
    toggleTodo(index) {
      this.todos[index].done = !this.todos[index].done
    }
  }
})
```

组件中使用：

```html
<template>
  <div>
    <h3>待办事项</h3>
    <input v-model="newTodo" @keyup.enter="addNewTodo" placeholder="输入任务回车添加"/>
    <ul>
      <li v-for="(todo, i) in todoStore.todos" :key="i">
        <label>
          <input type="checkbox" v-model="todo.done" @change="todoStore.toggleTodo(i)" />
          <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
            {{ todo.text }}
          </span>
        </label>
      </li>
    </ul>

    <p>已完成：{{ todoStore.doneTodos.length }}</p>
    <p>未完成：{{ todoStore.undoneTodos.length }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useTodoStore } from '@/stores/todo'

const todoStore = useTodoStore()
const newTodo = ref('')

function addNewTodo() {
  if (newTodo.value.trim()) {
    todoStore.addTodo(newTodo.value)
    newTodo.value = ''
  }
}
</script>
```

✅ 在这个例子中：

* **State** 存放 `todos`；
* **Getters** 用于区分完成和未完成；
* **Actions** 用于新增、切换任务状态。

---

## 4. 常见问题与总结

### 4.1 Pinia 和 Vuex 的区别？

* 不需要 `mutations`，直接通过 Actions 或直接修改 state；
* 更加简洁，学习曲线平缓；
* 完美支持 TypeScript。

### 4.2 使用 Pinia 是否必须组合式 API？

不是，Pinia 也支持选项式 API，不过更推荐组合式。

---

## 5. 总结

在 Pinia 中，状态管理的核心逻辑围绕 **State、Getters、Actions** 展开：

* **State**：定义全局数据源；
* **Getters**：类似计算属性，派生出新数据；
* **Actions**：封装逻辑和异步操作。

理解这三大核心概念，你就能轻松上手 Pinia，在 Vue 3 项目中写出更清晰、可维护的代码。
如果你正在从 Vuex 迁移到 Pinia，不妨从一个小模块开始，感受 Pinia 的简洁和强大。



在 Vue 3 生态中，Pinia 已经成为 Vue 官方推荐的状态管理工具，它比 Vuex 更轻量、简洁、类型友好。本文将带你深入理解 Pinia 的核心概念：State、Getters、Actions，并结合示例，帮你快速掌握如何在项目中使用。

Pinia 核心概念解析：State、Getters、Actions 怎么用？

前端开发工程师

编程语言

前端

Pinia是Vue3官方推荐的状态管理工具，比Vuex更轻量简洁。核心概念包括State(数据源)、Getters(派生数据)、Actions(业务逻辑)，支持模块化和TypeScript。通过TodoList示例展示如何使用Pinia管理状态，适合Vue3项目开发。

TypeScript

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

Pinia 核心概念解析：State、Getters、Actions 怎么用？-腾讯云开发者社区-腾讯云

Pinia 核心概念解析：State、Getters、Actions 怎么用？

Pinia 核心概念解析：State、Getters、Actions 怎么用？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐