Vue2.0 Vuex介绍和工作原理_vue2和vuex-CSDN博客

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/122302629

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()