Vue Academy · 课时

Getters 与模块

Q: 「Getters 与模块」这节课中我会学到什么？

计算派生状态，并将存储整理为多个模块 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

计算派生状态，并将存储整理为多个模块

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

使用获取器计算状态

有时您需要派生状态，例如筛选后的列表或计数值。获取器相当于存储中的计算属性：它根据状态派生值，并缓存结果，直到其依赖项发生变化。

定义获取器

获取器是一个接收状态并返回派生值的函数。

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

使用其他获取器的获取器

获取器会接收一个包含所有其他获取器的第二个参数，因此您可以组合使用它们。

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

访问获取器

在计算属性中通过 this.$store.getters 读取获取器。

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

方法式获取器

从获取器中返回一个函数，以便传入参数。请注意，方法式获取器不会缓存，每次调用都会运行。

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

mapGetters 辅助函数

与 mapState 类似，mapGetters 辅助函数会自动将获取器转换为计算属性。

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

为什么要拆分为模块？

单个大型存储会变得难以维护。Vuex 允许您将存储拆分为模块，每个模块都有自己的状态、变更、操作和获取器，从而将相关逻辑集中在一起。

定义模块

模块本质上是一个具有与存储相同选项的对象。您可以在 modules 键下注册模块。

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

注册模块

在根存储的 modules 下组合模块。每个键都会成为模块名称。

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

为模块设置命名空间

设置 namespaced: true，让模块拥有自己的作用域。这样可以避免模块之间的命名冲突，并使结构更加明确。

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

访问带命名空间的模块

启用命名空间后，在提交变更、分发操作或读取获取器时，请在前面加上模块名称。

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

快速检查

测试您对获取器和模块的理解。

回顾

获取器从状态派生出经过缓存的值，可通过 this.$store.getters 或 mapGetters 访问。模块将大型存储拆分为职责集中的单元；设置 namespaced: true 可以为模块设置作用域，使您通过 module/name 前缀访问其中的成员。现在，您已经掌握了完整的 Vuex 工具集：状态、变更、操作、获取器和模块。

常见问题解答

「Getters 与模块」课时是免费的吗？

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

「Getters 与模块」这节课中我会学到什么？

计算派生状态，并将存储整理为多个模块你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「Getters 与模块」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy