Vuex的使用

什么是Vuex？为什么要用Vuex？

官方的说法是：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

可以理解为：将所有组件的共享的变量、规则等全部存到一个对象中，并把这个对象放在Vue的顶层，供其他组件直接调取使用。

我们在Vue的各个组件中传值时，通常时父子组件直接传值，这样传值的效率很低；而且兄弟组件之间很难进行传值。

于是乎我们可以使用Vuex，类似于在Vue项目的最外层创建一个仓库，把要用的东西统统塞进去，这样任何组件想要使用就不用通过繁琐的渠道进行层层的调取。

当然，如果你的项目是一个简单、小的项目，使用Vuex往往事倍功半，但如果你的项目是一个中大型项目，那么你自然会使用到Vuex，因为它能够帮你更好，更模块化的管理你的数据。

---

Vuex的安装

你可以进行cdn引入，也可以直接下载Vuex使用

mpn：

npm install vuex@next --save

yarn：

yarn add vuex@next --save

---

Vuex的核心：

下图为官方给出的状态管理图例

要注意的是，扩展插件：Devtools能够帮助我们更好的调试vue,但该插件只能监听到Mutations操作，也就是同步操作。

---

Vuex核心概念：

1.State

用一个对象就包含了全部的应用层级状态，被称为单一状态树，即单一数据源，能让我们能够直接地定位任一特定的状态片段，同时在调试的过程中也能轻易地取得整个当前应用状态的快照。

State的具体用法

2.Getter

与计算属性类似 ，能够在数据进行展示前对数据进行一些处理，如过滤，计算长度等操作。

如果这些操作将被频繁的使用到，我们就可以将他们抽离出来，放在getter里。

通常我们将state作为第一个参数，表明要对State中的哪一项进行操作。

Getter的具体用法

---

3.Mutation

Mutations是更改State中的状态的唯一方法。它与事件非常类似，每个 mutation 都有一个字符串的事件类型 (type)---“叫什么名字”和一个回调函数 (handler)--“具体是做什么的”。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

 而我们不能够直接调用这个函数，而是要通过store.commit('名字')来进行调用

当然，调用这个函数是可以附带其他参数的，即payload作为第二个参数，为你要传递给他的值。

Mutation的具体用法

---

4.Action

 Action与上文的Mutation类似，但区别在于：Action是提交的是Mutation，而不是直接修改状态；Action可以包含任意的异步操作，所以Devtools插件不能检测到Action。上文提到了，Mutation是进行同步操作的，所以Devtools可以检测到。

来自官网的例子： 

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

与Mutation相同，Action也不能够直接调用，需要通过store.dispatch触发。

Action同样支持附带参数（payload）

Action的具体用法

---

 5.Module

开头我们提到，Vuex就像是在Vue项目顶层的一个仓库，但是如果只建一个仓库的话，当需要存放的东西太多，就会显得非常杂乱和臃肿。这时我们可以对这个仓库进行拆分，这个是装AA的，那个是装BB的，即模块化处理。每个模块拥有自己的 state、mutation、action、getter，甚至能够继续细分。

我们要做的就是在index.js中引入相应模块，并进行导出即可。

 

 

---

四个map的使用方法：

mpaXXX具体就是将XXX中的数据进行映射，配合对象展开运算符映射到当前组件进行使用。

mapState方法：用于帮助我们映射state中的数据为计算属性。

mapGetters方法：用于帮助我们映射getters中的数据为计算属性。

mapMutation / Action方法：用于帮助我们生成与aMutation / Action对话的方法。即：包含$store.commit / dispatch(xxx)的函数。