Vuex 基础知识

讲师:Vue Msatery Team

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

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

Vuex 简介

在本课程中,我们将探索 Vuex 的基础知识:Vue 的状态管理库。如果您一直遵循我们的初学者路径,本课程将从Real World Vue 3停止的地方开始。到本课程结束时,您将对何时以及为何使用 Vuex 有深入的了解,并且您将能够在自己的 Vue 应用程序中实现它。逐课,我们将把 Vuex 添加到我们在 Real World Vue 3 课程中创建的示例应用程序中。

但在我们开始编写任何代码之前,我们需要了解 Vuex 背后的基本原理,并查看一个示例用例,该用例说明了 Vuex 的不同部分以及它们如何协同工作。


状态管理案例

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

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

https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1578371882428_0.png?alt=media&token=bad49a29-5fff-4dcd-bf42-f5c8beec69b7

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

https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1578371882429_1.png?alt=media&token=2c411c9f-d5cf-4404-8009-00b73e24a622

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


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

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

https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1578371889694_2.png?alt=media&token=f9cc01f0-4644-4867-92ad-17ccd6cc7a6e

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

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


状态管理模式

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

https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1578371892222_3.png?alt=media&token=911a39ae-99b2-4026-9132-71fae035ffc5

正如您可以使用 创建一个新的 Vue 实例(或 Vue 应用程序)一样createApp(),您可以使用 创建一个 Vuex 商店createStore()

Vue 实例有一个data属性,而 Vuex 存储有state. 两者都是反应性的

虽然实例有methods,其中可以更新data,但商店有actions,可以更新状态。

虽然实例具有计算属性,但存储具有getters,这允许我们访问我们的 . 的过滤、派生或计算版本state

此外,Vuex 提供了一种跟踪状态更改的方法  ,称为mutations. 我们可以使用actionscommit mutations

在撰写本文时,Vue DevTools 尚未为 Vue 3 准备就绪,但当它们准备就绪时,我们可以期望能够通过提交给状态的每个变更的记录及时追溯。


Vuex 商店示例

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

https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1578371895007_4.png?alt=media&token=27387520-216e-47da-99bd-41e72cebd7bc

在我们的 State中,我们有一个isLoading属性,以及一个数组todos

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

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

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

https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1578371897321_5.png?alt=media&token=1a6cfcd6-5eb0-4d63-b991-f0dbd0c460ea

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


运动中的 Vuex

https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1578371900954_6.gif?alt=media&token=a92f02df-8800-4f4a-ac63-6690f9453e66

接下来……

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

在下一课中,我们将开始将 Vuex 实施到我们在 Real World Vue 3 中构建的示例应用程序中。

发表回复

后才能评论

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