Vue Academy · 课时

defineStore：状态、派生值与操作

Q: 「defineStore：状态、派生值与操作」这节课中我会学到什么？

Options store 与 Setup store、将状态定义为函数、计算属性式派生值，以及异步操作 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

Options store 与 Setup store、将状态定义为函数、计算属性式派生值，以及异步操作

第 2 / 4 课13 个步骤

defineStore：状态、派生值与操作 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

状态仓库的三大支柱

选项式状态仓库由三部分组成：状态（数据）、获取器（派生值）和操作（更改状态的方法）。您可以在 defineStore 中定义这三部分。

定义状态仓库

defineStore 接收一个唯一的标识符字符串和一个选项对象。它会返回一个组合式函数，按照惯例命名为 useXxxStore。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

状态是一个函数

state 选项必须是一个返回对象的函数。这样可以确保每个状态仓库实例都获得全新的状态，就像组件中的 data() 一样。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

读取状态

在 setup 中调用组合式状态仓库来获取一个实例，然后直接读取状态属性。它们具有响应性。

const counter = useCounterStore()
console.log(counter.count) // 0

获取器是计算值

getters 类似于 computed 属性。每个获取器都会将 state 作为第一个参数，并返回一个派生值。它们会被缓存。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

使用获取器

像访问属性一样访问获取器——不需要括号。Pinia 只会在其依赖项发生变化时重新计算它。

const counter = useCounterStore()
console.log(counter.doubled) // 4

获取器引用其他获取器

要使用另一个获取器，请引用 this，而不是状态参数。使用 this 时，不要使用箭头函数。

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

操作会更改状态

actions 是方法。它们使用 this 直接读取和修改状态。不需要提交，也不需要分发——只需调用方法即可。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

异步操作

操作可以是 async 的。这里适合执行 API 调用——获取数据，然后将结果赋给状态。

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

在组件中使用状态仓库

导入组合式函数，在 <script setup> 中调用它，然后在模板中使用状态、获取器和操作。

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

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

批量修改多个字段

要一次更改多个状态字段，请使用 $patch。它会将这些更改归并为开发者工具中的单条记录。

counter.$patch({ count: 10, name: 'New' })

快速检查

检验您对选项式状态仓库结构的掌握程度。

在交互式课程中回答

回顾

选项式状态仓库由三部分组成：

state：返回数据对象的函数。
getters：会被缓存的派生值，接收状态（或使用 this）。
actions：通过 this 直接修改状态的方法。

在 setup 中调用状态仓库的组合式函数即可使用它。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「defineStore：状态、派生值与操作」课时是免费的吗？

是的 — 「defineStore：状态、派生值与操作」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「defineStore：状态、派生值与操作」这节课中我会学到什么？

Options store 与 Setup store、将状态定义为函数、计算属性式派生值，以及异步操作你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「defineStore：状态、派生值与操作」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy