VUEX是为vue.js应用程序开发的一种状态管理模式。它采用了集中存储管理应用程序的所有组件的状态,并确保状态在相应的规则中以可预测的方式变化。VUEX还集成到Vue的官方调试工具工具DevTools扩展(打开新窗口),该窗口提供了高级调试功能,例如Time-Travel调试和状态快照简介,例如零配置。
vue(发音 /vju( /,类似于视图)是用于构建用户界面的逐步框架。层,不仅容易入门,而且还方便地集成第三方库或现有项目。另一方面,当使用现代工具链和各种支持类库时,VUE还可以为复杂单人提供驱动程序- 页面应用程序。
vue.js的核心是一个允许简单模板语法将数据声明为DOM的系统:
我们已经成功地创建了第一个VUE应用程序!这似乎与渲染字符串模板非常相似,但是Vue在其背后做了很多工作。现在已经建立了数据和DOM,一切都负责。确认?打开浏览器的JavaScript控制台(只需在此页面上打开)并修改值。您将看到上面的示例相应更新。
请注意,我们将不再与HTML直接交互。一个VUE应用程序将其安装在DOM元素上(对于此示例),然后完全控制它。HTML是我们的入口,但其余部分将发生在新创建的VUE实例中。
除文本插值外,我们还可以绑定元素属性:
在这里,我们遇到了一些新事物。您看到的属性称为指令。该说明的前缀表示它们是Vue提供的特殊属性。也许您已经猜到它们会在渲染的DOM上应用特殊的响应行为。指令的意思是:“保持此元素节点一致的约束和VUE实例。”
如果您再次打开浏览器的JavaScript控制台并输入,您将再次看到此绑定属性已更新的HTML。
VUEX的基本数据用于存储变量并使用单个状态树-A对象包含所有应用程序级别状态。在此点,它作为“唯一数据源”而存在。这还意味着每个应用程序仅包含一个应用程序实例。单个状态树允许我们直接找到任何特定的状态片段,并且还可以在调试过程中轻松获取整个当前应用程序状态的快照。
2.1.1在VUE组件中获取VUEX状态。由于VUEX的状态存储是响应迅速的,因此从商店实例读取状态的最简单方法是在计算属性中返回某个状态。
每当store.state.count更改时,重新计算属性并触发关联的DOM。但是,该模型会导致组件依赖于全局状态。在模块化构造系统中,每个组件中都需要经常导入它需要使用该方法,并且在测试组件时需要模拟仿真状态。VUEX提供了一种机制,可以通过商店选项“将根部分量”“注入”状态从根部组件中注入状态,从而(vue.use(vuex))。
通过在基础上注册选项,将将此实例注入根组件下的所有子类中,并且可以通过访问访问子类。
2.1.2 MAPSTATE辅助函数当组件需要获得多个状态时,这些状态声明将重复计算属性并冗余。要解决此问题,我们可以使用辅助函数来帮助我们生成计算属性。
当映射的计算属性名称与子节点名称的名称相同时,我们也可以传递字符串数组。
2.1.3对象扩展的操作公式函数返回一个对象。我们如何将其与本地计算属性混合?通常,我们需要使用工具函数将多个对象合并到一个对象中,以使我们能够将最终对象传递给属性。但是由于对象是开发的,我们可以大大简化写作:
从基本数据(状态)得出的数据等效于状态的计算属性。有时我们需要从中学产生一些状态,例如过滤列表并计数:
如果有多个需要此属性的组件,我们要么复制此函数,要么绘制共享功能,然后以多个位置导入它 - 不理想。VUEX允许我们定义它(可以考虑的计算属性)。就像计算属性一样,返回值将根据其依赖项进行缓存,并且只有在其依赖性值更改时才会重新计算。GETTER接受为其第一个参数:
2.2.1通过属性访问Getter将被视为对象。您可以以属性的形式访问这些值:
Getter也可以接受其他第二个参数:
我们可以轻松地在任何组件中使用它:
请注意,当通过属性访问时,它是VUE响应系统的一部分。
2.2.2通过方法访问,您还可以使用功能返回功能以获得入学。当您查询您的数组时,这非常有用。
请注意,每次访问它时,您都会每次致电而无需缓存结果。
辅助函数只是局部计算属性:
如果要使用属性另一个名称,请使用对象表单:
更改VUEX状态的唯一方法是提交。VUEX与事件非常相似:字符串()和回调函数的每个事件()。此回调函数是我们实际进行状态更改的地方,并且将接受第一个参数:
您不能直接调用一个。此选项更像是事件注册:“触发类型的类型时,调用此功能。”要醒来,您需要使用相应的调用方法:
2.3.1提交负载(有效负载)您可以输入其他参数,即load():
在大多数情况下,负载应该是一个对象,以便它可以包含多个字段并记录它更容易阅读:
2.3.2提交对象样式方法的另一种方法是直接使用包含属性的对象:
当提交对象样式的方法时,整个对象作为负载传递到该函数,因此它保持不变:
2.3.3突变必须遵守VUE的响应规则。由于VUEX中的状态正在响应,因此当我们更改状态时,监视状态的VUE组件将自动更新。这也意味着在VUEX中,它还需要遵守某些预防措施,例如使用VUE:
2.3.4使用恒定替换突变事件类型。使用常量替换事件类型是在各种通量实现中非常普遍的模式。这样,可以扮演角色,同时将这些常数放在单独的文件中可以允许您的代码合作者查看整个随附的内容:
2.3.5突变必须是同步函数。一个重要的原理是记住它必须是同步函数。
想象一下,现在我们正在寻找一个应用程序并观察观察中的日志。每个记录是一个快照,需要捕获以前的状态和后一个状态。
但是,上面示例中异步函数中的回调使得无法完成:因为触发后,尚未调用回调函数,我不知道何时将回调函数实际上称为状态中的更改该功能是不可逆的。
2.3.6在组件中提交突变。您可以在组件中使用提交,也可以使用辅助函数调用组件中的映射(需要在根节点处注入)。
2.3.6下一步:操作混合异步呼叫将使您的程序很难进行调试。想要区分这两个概念。在vuex中,它们都是同步交易:
动作类似,区别是:
让我们注册一个简单的操作:
操作函数接受具有相同方法和属性作为实例的对象,因此您可以致电并提交和平。在实践中,我们经常使用ES2015的参数解构来简化代码(尤其是当我们需要时多次致电):
2.4.1通过方法触发器分配行动行动:
乍一看,感觉更多。直接分发它不是更方便吗?事实上,事实并非如此。您还记得同时执行此限制吗?行动不受限制!我们可以在内部执行异步操作:
动作支持相同的负载方法和对象方法进行分发:
查看一个更实用的购物车示例,涉及异步API的呼吁和分发多个:
请注意,我们正在执行一系列异步操作,并提交以记录产生的副作用(即状态变化)。
2.4.2在组件中使用分布的组件中分布操作,或使用辅助函数将组件映射到呼叫中(需要先在root节点上注入):
2.4.3组合诉讼法通常是异步的,那么您怎么知道何时?更重要的是,我们如何结合多个以处理更复杂的异步过程?首先,您需要了解您可以处理触发处理功能,仍然返回:
现在你可以:
它也可以在另一个:
最后,如果我们使用它,我们可以结合以下内容:
一个人可以在不同的模块中触发多个功能。在这种情况下,只有在完成所有触发功能时,才能执行返回的承诺。
模块化VUEX允许每个模块具有自己的状态,突变,操作,getters,使结构非常清晰易于管理。使用以下两种存储数据的方法:dispatch:异步操作,写作:this.store.commit('突变方法名称',值)
3.1可以集中于Vuex管理的数据,易于开发和维护;
3.2可以有效地实现组件之间的数据以提高发展效率;
3.3 VUEX中存储的数据都在实时响应数据页面的共享同步。
作者:道路上的LX版权属于作者。