Pinia 的有效模式

Proven Pinia Patterns

 介绍

欢迎来到 Vue Mastery 的 Proven Pinia Patterns,我们将在这里探索你在生产中使用 Vue 的状态管理库时想要了解的专业级模式。我们将介绍在您的应用中使用 Pinia 的最佳实践,并将这些实践应用于常见场景。

如果你还没有学习过 Pinia 的基础知识,你首先想看看我在这里关于 Vue Mastery 的另一门课程,叫做 Pinia Fundamentals。

在 Proven Pinia Patterns 中,我们将研究 Pinia 的一些规则 – 这是必要的做事方式 – 但我们也将研究一些模式 – 使用 Pinia 使应用程序更有组织、更清晰和超级高效的推荐方法。

我们将查看一个示例项目,以了解实际应用程序上下文中的一些规则和模式。示例项目使用 Pinia、Vue Router、Google Maps API 和 Vue Use 可组合项库。

我们不会从头到尾构建它,但我们将使用它来更仔细地研究如何在具有多个数据流的应用程序中使用 Pinia,这些数据流需要在应用程序中共享。

让我们看一下示例项目的作用。这是一个餐厅查找器;输入城市和搜索词以查找特定区域内的餐馆。用户可以注册一个帐户,以便保存他们的收藏夹。此外,他们还可以读取从 Google Maps API 中提取的信息,例如评分和评论。

此应用在其自己的 Pinia 存储中跟踪每个逻辑关注点的全局状态:

 这些商店包括:

  • 用户身份验证
  • 地理位置,用于识别当前用户的位置或他们在城市输入栏中键入的位置
  • 有关在搜索中检索到的餐厅的数据
  • 用户将自己喜欢的餐厅添加到收藏夹列表时的收藏夹数据

除了了解如何组织我们的 Pinia 商店外,我们还将了解我们可以创建的两种不同类型的商店:选项商店与设置商店。此外,我们还将了解如何在整个应用程序中访问和更新状态。

最后,我们将探索 Pinia 附带的更多独特功能,例如 $patch、$reset 和 Pinia 插件,我们可以从头开始构建。

现在我们已经对自己的发展方向有了更好的了解,让我们花点时间来谈谈为什么我们甚至会选择使用 Pinia,因为 Vue 3 的 Composition API 已经有一个强大的内置反应系统,可以灵活地共享状态。如果您一直在想 Pinia 是否有必要,我将在下一课中解决这个问题。让我们开始吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。