什么是Vuex?（共享数据）

1.概念：专门在Vue 中实现集中式状态（数据）管理的一个Vue 插件，对vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。(就相当于一个集中的数据管理仓库,任何组件都可以读/写仓库中的胡数据)
Github 地址

图解：

假设我们A组件当中有一个x属性（数据），其他的组件也想用(读/写,改),,那么此时A组件当中的x属性(数据)就有点共享单车的意思了,每个人都想用,每个人都能用(多组件共享数据)
1.使用全局事件总线来实现:(编码很麻烦且复杂,代码复用率不高)
2.使用vuex来实现:
Vuex不属于任何一个组件,它的本身是一个插件,需要用到Vue.use()来所调用,在共享单车(多组件当中都想用的属性[数据])的场景当中就相当于共享单车的停放区域,每个人(组件)都能调用(读/写,改).

什么时候去使用这个vuex呢?(共享状态[数据]的时候)

1.多个组件依赖于同一状态
2.来自不同组件的行为需要变更同一状态

Vuex的工作原理:

由上图，我们可以看出Vuex有以下几个部分构成：

1）state(数据类型为对象)
- state是存储的单一状态，是存储的基本数据。
2）Getters
- getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
3）Mutations(数据类型为对象)
- mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）
4）Actions(数据类型为对象)
- actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

6）辅助函数
- Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store。

举例完整的执行流程:

在 vue 例子中，我们触发的 click 事件，就能触发 methods 中的方法，这是 vue 设计好的。而在 vuex 中则不行了，一定要有个东西来触发才行，就相当于自定义事件 on，emit。vuex 中的 action，mutation 通过 on 自定义的方法，相应的需要 emit 来触发。vuex当中,组件可以通过 dispatch 可以触发 actions 中的方法，actions 中的 actions 可以触发 mutations 中的方法, mutations(相当于vue中的methods)通过mutate加工数据后返回给state(相当于vue中的data)解析渲染过后响应到页面。
使用白话来比喻就是:组件相当于客人,Actions相当于服务生,Mutations相当于后厨,客人要点的餐就相当于State的状态(数据),当客人来到餐厅吃饭,他可以通过给服务生下单提要求(有业务逻辑),比蛋炒饭不要蛋也不要饭,服务生就可以给你下单进而要求送到后厨加工(Mutations),当然如果你跟后厨(Mutations)很熟的话,那么后厨(Mutations)看到你就知道你喜欢吃蛋炒饭不加蛋也不加饭(无业务逻辑),那么后厨(Mutations)也可以直接给你加工而不需要通过服务生了(Actions)

vuex流程和vue对比

对比关系:

更改数据: mutations -> methods
获取数据: getters -> computed
数据: state -> data

总结

vuex是针对vuejs的状态管理工具。vuex完美的结合了vue的响应式数据。
vue可以直接触发methods中的方法，vuex不行。为了处理异步，当你触发一个点击事件时，会通过dispatch来访问actions中的方法，actions中的commit会触发mutations中的方法从而修改state的值，通过getters来把数据反映到视图。
vuex通过Vue.use(vuex)，从而调用install方法，通过applyMixin(Vue)在任意组件执行this.$store都能访问到store对象，实现将store挂载注入到组件中。
vuex的state状态是响应式的，是借助vue的data是响应式，将state存入vue实例组件的data中。
vuex的getters则是借助于vue的计算属性computed实现数据的实时监听。

这篇博客引用了作者为”大神、求带“,”小铭子“的文章
原文链接为:CSDN 、慕课

什么是Vuex?（共享数据）

图解：

1.使用全局事件总线来实现:(编码很麻烦且复杂,代码复用率不高)

2.使用vuex来实现:

什么时候去使用这个vuex呢?(共享状态[数据]的时候)

Vuex的工作原理:

由上图，我们可以看出Vuex有以下几个部分构成：

举例完整的执行流程:

vuex流程和vue对比

对比关系:

总结