概念:VUEX是为vue.js应用程序开发的一种状态管理模式。它采用了集中存储管理应用程序的所有组件的状态,并确保状态在相应的规则中以可预测的方式变化。
简而言之(说话),就是在任何组件中实现通信,并且可以检测到数据的更改。
Vuex是集中在MVC模式下的模型层。它规定所有数据操作都必须通过该过程执行,并与双向绑定功能(例如VUE数据视图V模型)结合使用,以实现页面显示更新。
让我们看下面的图片以了解整个过程。
简要描述主要方法详细信息:
一般句子中的简短说明是:
VUE组件接收交互式行为,调用调度方法以触发与操作相关的处理。如果需要更改页面状态,请调用提交方法,以将突变修改提交状态,并通过Getters获取状态的新值,并响应VUE组件的数据或状态。接口已更新。
无论您想要什么,只需构建一个文件夹即可进行调节。
注意:
在此步骤中创建index.js文件时,我们导入并引用了Vuex,因为我们需要实例化VUEX对象。如果您以MAIN进行介绍,则在导入商店时会导致错误。
让我们简单地存储数据并将其取出查看。一系列操作后,我们的VM(视图模型)和VC(视图组件)已经拥有商店数据源对象。因此,我们可以使用Store中的数据。
在index.js中准备数据
在组件中获取数据
您知道每个VM和VC都有商店的运作良好。
突变 - 更改商店中状态的唯一方法是基于上述原理图。我们可以知道,VUEX法规只能通过提交突变(包括行动操作)来改变状态的状态,并通过提交突变进行修改。另一个重点是,在Vuex中,规定该突变不能包括异步操作
让我们修改上面的名称和年龄属性。
在组件中,我们要使用
该参数可以是对象或单个属性
Anction同步/异步变化状态类似于突变,差异是:
背景API请求在本模块中请求。所有操作最终都将达到操作的突变并更改状态。
仍然是上面的示例,修改状态异步的属性
首先代码
在组件中使用
注意观察时间,2秒钟后进行更改。
波的分析:
Getter,我们可以将其理解为商店中状态的某些衍生性状态,也可以理解为计算属性。它类似于计算属性。当返回值根据其依赖项缓存并更改依赖对象时,将重新计算因子对象更改。
GETTER属性等效于许多需要处理与数据相同的组件,这些组件可以理解为公共计算属性。
这很清楚
Getter接受状态作为其第一个参数,也可以使用箭头功能。
进入组件
Vuex允许我们将商店分为模块。EAD模块具有其自己的状态,突变,动作,Getter甚至嵌套模块。我只是在这里介绍更多。查看官方文档(模块| Vuex(vuejs.org))
Vuex提供了几种辅助功能,包括MapState,Mapgetter,Mapmout,MapAction。它们都是复杂句子的缩写形式。
智能函数
如果该州有很多数据,我们必须重复许多此类代码,我们可以通过MAPSTATE进行映射。
数组写作
如果您想命名别名,则必须编写对象的形式
MapGettersMapgetters与MapState相似,但它们只是映射Geters.Replace
替换mapmunt
MAPACTION更换
上述辅助函数涉及需要用于使用参数的传递属性。
请更具体地查看官方网站文档。欢迎所有大个子指出河流和山脉。
看到最后一个赞美集,我听说可以绘制评论区域!