Vuex是什么
1.概念:专门在Vue中实现集中式状态(数据)管理
的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通讯的方式,且适用于任意组件间通信。
2.Github地址
什么时候使用Vuex
- 1.多个组件依赖于同一状态
- 2.来自不同组件的行为需要变更同一状态
之前组件与组件间通讯用全局事件总线可以,但是,组件一多()每一个组件都想用一个组件里的一个数据,得写一堆$bus.$emit
和$bus.on
就有些绕和繁琐。所以Vuex
就是专门解决共享数据的这个问题的
vuex
不属于任何组件
Vuex工作原理(重点)
Vuex是有三个重要的组成部分的:
- 1.Actions(动作、行为)
- 2.Mutations(本身就有修改,加工,维护)
- 3.State(直译是状态)
Vue Components(你的组件们) 去调用一个API(Dispatch
(去调用dispatch
)它是一个函数)
- dispatch():
- 第一个参数:你要进行的动作类型(要加?要减?要乘?要除?)
- 第二个参数:动作行为的值
- dispatch(‘jia’,2)
这样你就走下去了,你加
这个动作
,和加
的这个值
就来到了Actions
(也是一个Object
类型的对象,里面一定会有个key
与传过来的动作
去对应,
{
...
jia:function()
}
对上就会引起函数的调用,这个函数一旦被调用,就收到了你所传递过来的值
)
再这个jia:function()
对应的这个函数里面, 你去自己调用 这个commit()
:
- commit() (提交)
- 第一个参数:表达用户想要干什么
- 第二个参数:用户传递过来的值
- commit(‘jia’,2)
这个流程就走到了Mutations
(也是一个Object对象,有很多k-v,但是肯定有你传过来的k-v):
{
.....
jia:function()
}
那这里的jia:function()
会拿到俩个东西:
- 第一个东西:整一个
state
- 第二个东西:你所传过来的值(这里是
2
)
Mutate
就不是一个API了,你只要在jia:function()
里面加上一个state.sum += 2
这样写,它底层就自动的给你走了Mutate
,然后你就会发现state
对象里面保存的sum就从0变成了2
,然后Vuex
做了一个特别给力的事,它能重新帮你解析这个组件,再去渲染(render
);于是页面的sum也变成了2。这就是整个流程
这个Actions
虽然看上去没有什么作用,但是它有一个Backend API(后端接口)
有的时候存在这么一个场景:
你VueComponents
调用了dispatch('chu')
,它(Actions
)就会问你除几?就说你(Actions
)得问问另一台服务器,那台服务器让我除几我(dispatch
)就除几。
也就是说你执行一个动作,但是这个动作所对应的值需要发送ajax
请求才能获取的时候,你就需要在Actions
里面发送ajax
请求
如果出现了我知道dispatch('jia')
要加几,那Vue说:如果是知道加几的情况,Vue允许你在VueComponents
组件里直接调用commit
就直接与Mutations
进行对话
Devtools: Vuex官方所出的一个开发者调试工具。跟Mutations
?
因为
Mutations
才是真正帮你修改或者加工state
的
拟生活例子:
VueComponents:客人
Actions:服务员
Mutations:后厨
State:菜
客人一进门张嘴说话(dispatch这个API调用)
:蛋炒饭一份(('jia',2))
,服务员就知道了((jia,2)
),用收里面的点餐器就把你的蛋炒饭一份(('jia',2))交给(commit('jia,2'))
了后厨团队,然后把菜进行了加工(Mutate
)然后把菜送上来(render
)
Actions
里面没有业务逻辑和发送ajax
请求,其实可以省略;但是如果你有要求,比如我奇数的时候再加或者是等一等再加(这些都是有业务的逻辑),就需要Actions
这个图里面没有体现出来的是这么一个环节: 就是组成Vuex重要的三个部分:Actions
、Mutations
、State
。这三个东西要经过一个人的领导,这个人是store
(仓库、管理)
之所以我们这么需要store
那是因为这个dispatch
不是window
给我们提供的,是stort
给我们提供的,也就是说得store.dispatch()
; 同理store.commit()
总结
掌握哪些点对我们写代码有所帮助:
- 1.Actions、Mutations、state这三个单词会写;它们三个都是Object对象类型
- 2.Actions、Mutations、state这三个都得经过
store
领导 - 3.你得让所有的组件实例对象
VueComponent
都能看得见store