掌握 Vuex

讲师:Vue Msatery Team

口袋资源独家Vue Mastery付费课程独家中英文字幕配套资料齐全!

不到1/10的价格,即可享受同样的高品质课程,且可以完全拥有,随时随地都可以任意观看和分享。

关于 Vuex 4 的说明

Vuex 4 最近发布了,这是与 Vue 3 兼容的最新版本的 Vuex。几乎所有 4 个 API 都与本课程教授的 Vuex 3 相同。但是,您可以在此处了解一些重大更改。

⚠️ 状态管理案例

在充满组件的应用程序中管理状态可能很困难。Facebook 通过艰难的方式发现了这一点,并创建了 Flux 模式,这是 Vuex 的基础。Vuex 是 Vue 自己的状态管理模式和库。在本课中,我们将探讨为什么应用程序可能需要 Vuex,以及它如何增强您的应用程序。

当我们谈论状态时,我们指的是您的组件所依赖和呈现的数据。博客文章、待办事项等。如果没有 Vuex,随着应用程序的增长,每个 Vue 组件可能都有自己的状态版本。

但是,如果一个组件改变了它的状态,而远亲也在使用相同的状态,我们就需要传达这种变化。有默认的方式向上传递事件并向下传递 props 以共享数据,但这可能会变得过于复杂。

相反,我们可以将我们所有的状态整合到一个地方。一个位置包含我们整个应用程序的当前状态。一个单一的事实来源。


单一事实来源 这就是 Vuex 提供的,每个组件都可以直接访问这个全局状态。

就像 Vue 实例的数据一样,这个 State 是反应性的。当一个组件更新状态时,使用该数据的其他组件会收到通知,自动接收新值。

但是仅仅将数据整合到一个单一的事实来源并不能完全解决管理状态的问题。当许多组件从不同位置以不同方式改变状态时会发生什么?

我们需要一些标准化。否则,我们国家的变化可能无法预测且无法追踪。


状态管理模式 这就是为什么 Vuex 提供了一个完整的状态管理模式,以一种简单和标准化的方式来进行状态更改。如果您熟悉 Vue,Vuex 看起来应该非常相似。

正如 Vue 提供了一个使用创建的根 Vue 实例new Vue,Vuex 提供了一个使用创建的商店new Vuex.Store

Vue 实例有数据属性,而 Vuex 存储有状态。两者都是反应性的。

实例有方法,可以更新数据,而存储有操作,可以更新状态。

虽然实例具有计算属性,但存储具有 getter,它允许我们访问过滤、派生或计算状态。

此外,Vuex 提供了一种跟踪状态变化的方法,称为突变。我们可以使用 Actions 来提交 Mutations,并且从 Vue DevTools,我们甚至可以通过每个 mutation 的记录及时追溯到状态。


现在让我们看一个示例 Vuex Store。

在我们的State中,我们有一个 isLoading 属性,以及一个待办事项数组。

在其下方,我们有一个Mutation来在 true 和 false 之间切换 isLoading 状态。以及一个 Mutation,用于使用我们将从下面的操作中的 API 调用接收到的待办事项来设置我们的状态。

我们这里的Action有多个步骤。首先,它将提交 Mutation 以将 isLoading 状态设置为 true。然后它会进行 API 调用,当响应返回时,它会提交 Mutation 以将 isLoading 状态设置为 false。最后,它将提交 Mutation 以使用 API 的响应设置待办事项的状态。

如果我们需要只检索标记为完成的待办事项的能力,我们可以为此使用 Getter,它将只检索我们想要的特定状态。

现在让我们来看看这个运动。


运动中的 Vuex


让我们重温

希望你现在明白为什么你可能需要 Vuex 以及它如何通过为你的状态提供单一的真实来源,以及一个公共的 Actions、Mutations 和 Getters 库来帮助增强你的应用程序。

在下一课中,我们将开始在我们的示例应用程序中实施 Vuex。

发表回复

后才能评论

  • 每一个课程页面,都有演示地址选项,点击链接可以跳转到课程发布网站查看详细课程列表。
  • 绝大部分课程都有试看内容,可以先点击试看,再决定是否购买。
  • 本站课程均存储在阿里云盘或百度网盘中,由于阿里云盘对分享的文件类型有限制,所以课程资料和字幕会存储到蓝奏云盘中。
  • 阿里云盘和蓝奏云盘都是不限速下载的,你既可以选择在阿里云盘中在线学习,也可以选择下载到本地学习。
  • 课程下载到本地可以挂载中英文双字幕,请点击查看Potplayer挂载中英文双字幕教程
  • 本站所有课程,均提供mp4格式视频文件,中英文双字幕,配套资料齐全,不加密。
  • 每一个课程右侧下载面板中,都会有清晰度标识,大部分都是1080P或者720P,还有少数是超高清的。
  • 本站课程购买之后,均可以免费更新,所有课程,皆配有中文字幕。
  • 请注意,课程的中文字幕是根据英文字幕用谷歌翻译生成的,本非人工翻译。谷歌翻译准确度尚可,学习观看,没有问题。
  • 由于数字资源具有可复制性,一旦购买,不接受退款要求,请在购买之前,认真了解课程内容,确定是否需要。
  • 当然,如果有特殊情况,可以查看网站底部联系方式,联系站长说明问题,我会为你妥善处理。
  • 赞助本站VIP会员,可以免费下载所有课程,详情请查看VIP介绍