7
vuex是什么?
想必大家已经看过官方文档。就我的理解来说,可以把它当成一个全局对象,可以在全局对其操作state.

vuex项目目录

clipboard.png

State

保存了整个对象的状态,数据的格式需要根据业务需求给定。

clipboard.png

在这个小demo中a,b组件分别向c组件发送数据,所以定义了2个初始化数据;

Getters

一些简单或通用的操作可以抽取到getters上来,方便在应用中引用

clipboard.png

比如:从c组件直接获取a,b组件发送过来的数据;分别定义了2个方法用来接收;
clipboard.png

可以通过...mapGetters得到这2个方法发送的数据,也可以通过...mapState直接获取state里面的状态(图中注释部分)

Actions

所有数据的提交都在actions

clipboard.png

可以通过图中方法触发子组件提交事件
clipboard.png

commit是从对象解构出来方法,

clipboard.png

通过commit把提交的数据传递给mutations

Mutations

通过commit提交过来的方法在
clipboard.png

mutations继续加工(执行同步操作)

通过vuex的一个全局对象进行暴露

clipboard.png

再把vuex.Store生成的实例挂载到根节点中
clipboard.png

github源码地址:

https://github.com/jeromehan/... 如果您喜欢点个赞,您的点赞是我写下去的动力!


jerome
111 声望6 粉丝