Vue Academy · 课时

组合多个存储并实现跨存储访问

Q: 「组合多个存储并实现跨存储访问」这节课中我会学到什么？

在一个存储中使用另一个存储、存储组合模式，以及避免循环依赖 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在一个存储中使用另一个存储、存储组合模式，以及避免循环依赖

第 3 / 4 课13 个步骤

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

状态仓库可以使用其他状态仓库

真实应用通常有多个相互依赖的状态仓库。购物车状态仓库可能需要身份验证状态仓库来了解当前用户。Pinia 让跨状态仓库访问变得简单直接。

在操作中调用状态仓库

在操作内部，只需调用另一个状态仓库的组合式函数即可。由于操作会在 Pinia 激活后运行，因此这样做是安全的。

import { useAuthStore } from './auth'

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: {
    checkout() {
      const auth = useAuthStore()
      if (!auth.isLoggedIn) return
      // proceed with auth.userId
    }
  }
})

设置式状态仓库语法

除了选项对象，defineStore 还接受一个设置函数。它看起来像组件的设置函数：声明 refs 和计算属性，然后返回它们。

import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  return { count }
})

以 refs 形式表示状态

在设置式状态仓库中，您返回的每个 ref 或 reactive 都会成为状态。基本类型使用 ref，对象使用 reactive。

export const useUserStore = defineStore('user', () => {
  const name = ref('Coddy')
  const profile = reactive({ age: 30 })
  return { name, profile }
})

以 computed 形式表示获取器

返回的 computed 会充当一个获取器。它会被缓存并具有响应性，就像选项式状态仓库中的获取器一样。

export const useCounterStore = defineStore('counter', () => {
  const count = ref(2)
  const doubled = computed(() => count.value * 2)
  return { count, doubled }
})

以函数形式表示操作

返回的函数就是一个操作。它可以使用 .value 直接读取和写入 refs。

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
})

返回 refs 和 computed

设置式状态仓库的关键规则是：返回您希望公开的所有内容。未返回的任何内容都会留在状态仓库内部，保持私有。

export const useStore = defineStore('s', () => {
  const visible = ref(0)
  const secret = ref('hidden') // not returned -> private
  return { visible }
})

设置式状态仓库中的跨仓库访问

在设置式状态仓库中，您可以在顶层调用另一个状态仓库，并在计算属性或操作中使用它。

export const useCartStore = defineStore('cart', () => {
  const auth = useAuthStore()
  const canCheckout = computed(() => auth.isLoggedIn)
  return { canCheckout }
})

避免循环依赖

如果状态仓库 A 导入状态仓库 B，而 B 又导入 A，就可能遇到循环依赖。避免在模块顶层调用另一个状态仓库；应当在需要它的操作或获取器内部调用。

// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
  doWork() {
    const other = useOtherStore() // resolved at call time
  }
}

延迟调用为何有帮助

在函数内部调用组合式状态仓库，会将解析推迟到运行时，等所有模块都加载完成后再进行。这样可以打破导致模块求值时崩溃的导入循环。

选项式状态仓库与设置式状态仓库

两种方式的能力相当。如果您希望使用熟悉的声明式结构，请选择选项式状态仓库；如果您需要完整的组合式 API 灵活性，例如在状态仓库中使用侦听器或组合式函数，请选择设置式状态仓库。

快速检查

请测试您对组合存储库的理解。

在交互式课程中回答

回顾

您已经学会组合存储库：

在操作中调用另一个存储库的可组合函数，以实现跨存储库访问。
设置式存储库使用一个函数：引用是状态，计算属性是获取器，函数是操作。
返回您希望公开的所有内容。
在函数内部延迟调用存储库，以避免循环依赖。

免费开始

用 AI 导师学习 HTML — 免费

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

课程: 42
课程: 156

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

常见问题解答

「组合多个存储并实现跨存储访问」课时是免费的吗？

是的 — 「组合多个存储并实现跨存储访问」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「组合多个存储并实现跨存储访问」这节课中我会学到什么？

在一个存储中使用另一个存储、存储组合模式，以及避免循环依赖你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「组合多个存储并实现跨存储访问」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy