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 组件可能都有自己的状态版本。
但是,如果一个组件改变了它的状态,而远亲也在使用相同的状态,我们就需要传达这种变化。有默认的方式向上传递事件并向下传递 props 以共享数据,但这可能会变得过于复杂。
相反,我们可以将我们所有的状态整合到一个地方。一个位置包含我们整个应用程序的当前状态。一个单一的事实来源。
单一事实来源 这就是 Vuex 提供的,每个组件都可以直接访问这个全局状态。
就像 Vue 实例的数据一样,这个 State 是反应性的。当一个组件更新状态时,使用该数据的其他组件会收到通知,自动接收新值。
但是仅仅将数据整合到一个单一的事实来源并不能完全解决管理状态的问题。当许多组件从不同位置以不同方式改变状态时会发生什么?
我们需要一些标准化。否则,我们国家的变化可能无法预测且无法追踪。
状态管理模式
这就是为什么 Vuex 提供了一个完整的状态管理模式,以一种简单和标准化的方式来进行状态更改。如果您熟悉 Vue,Vuex 看起来应该非常相似。
正如您可以使用 创建一个新的 Vue 实例(或 Vue 应用程序)一样createApp()
,您可以使用 创建一个 Vuex 商店createStore()
Vue 实例有一个data
属性,而 Vuex 存储有state
. 两者都是反应性的。
虽然实例有methods
,其中可以更新data
,但商店有actions
,可以更新状态。
虽然实例具有计算属性,但存储具有getters
,这允许我们访问我们的 . 的过滤、派生或计算版本state
。
此外,Vuex 提供了一种跟踪状态更改的方法 ,称为mutations
. 我们可以使用actions
commit mutations
。
在撰写本文时,Vue DevTools 尚未为 Vue 3 准备就绪,但当它们准备就绪时,我们可以期望能够通过提交给状态的每个变更的记录及时追溯。
Vuex 商店示例
现在让我们看一个示例 Vuex Store。
在我们的 State中,我们有一个isLoading
属性,以及一个数组todos
。
在其下方,我们有一个 Mutation可以在和之间 切换我们的isLoading
状态。与 Mutation 一起使用我们将从下面的操作中的 API 调用接收到的待办事项来设置我们的状态。true
false
我们 这里的Action 有多个步骤。首先,它将提交 Mutation 以将isLoading
状态设置为true
。然后它会进行 API 调用,当响应返回时,它会提交 Mutation 以将状态设置isLoading
为false
。最后,它将提交 Mutation 以todos
使用我们从 API 返回的响应来设置我们的状态。
如果我们需要只检索标记为完成的待办事项的能力,我们可以为此使用 Getter,它将只检索我们想要的特定状态。
现在让我们来看看这个运动。
运动中的 Vuex
接下来……
希望你现在明白了为什么你可能需要 Vuex 以及它如何通过为你的状态提供单一的真实来源以及一个公共的 Actions、Mutations 和 Getters 库来帮助增强你的应用程序。
在下一课中,我们将开始将 Vuex 实施到我们在 Real World Vue 3 中构建的示例应用程序中。