# Vuex

# 一、Vuex到底是个什么鬼？

# 先说两句

官方已经有教程了，为什么还要写这个教程呢？说实话，还真不是我闲着蛋疼，官方的教程真的是太官方了，对于刚入门 Vuex 的童鞋来说，想必看官方的教程，很多地方就如同看圣经一样，比如「欧玛尼玛尼牙」，所有的字都认识，就是不知道说些什么玩意，不信，你可以戳进去看看 (opens new window)。

当然，对于大神级别一看就懂的，那就不用说了，肯定是看官方的更权威。还有，如果对 Flux (opens new window)、Redux (opens new window)、The Elm Architecture (opens new window) 比较熟悉的话，也可以移步官方，因为官方也说了，Vuex 的套路基本上都是从那边吸取整合后，过渡而来的，只不过，Vuex 只钟情于 Vue.js (opens new window) 罢了。

我之所以写这个教程，主要是因为自己刚刚开始和 Vuex 打交道的时候，痛过了、苦过了、伤过了，所以痛定思痛，为了能让自己更好的驾驭 Vuex，也为了不让新来的童鞋们被 Vuex 调戏过后无处诉苦，所以方才决定把官方的这些抽象的文字和概念，用连你身后的鼓励师小姐姐都能看懂的语言，分享出来，助你在前端的道路上越走越顺，顺利的找到一份有鼓励师陪伴的工作。

# 再说一句

Vuex 是 Vue.js (opens new window) 的座驾，所以，如果还不懂 Vue.js (opens new window) 的话，那还是先把 Vue.js (opens new window) 勾搭上了再带过来一起坐坐吧。当然，既然能够溜达到这里，想必跟 Vue.js (opens new window) 起码也已经是朋友了吧。

有点啰嗦，不要嫌弃，写教程也需要有点前戏，毕竟是第一次。

# 安装

关于 Vuex 的具体安装，就不在这里说了，这个官方还是比较清晰的，戳此进入 (opens new window)。但是需要注意两点：

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex，比如：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)  // 必须调用此函数来注入 Vuex

1
2
3
4

当使用全局 script 标签引用 Vuex 时，就不用那么麻烦了，直接引用进来就好，但要注意引用的先后顺序，如下：

// 在 Vue 之后引入 vuex 会进行自动安装
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

1
2
3

虽然 script 的方式看起来比较自动化，但是接触得多了，你就会明白模块化其实才是我们的最佳姿势。

# 揭开 Vuex 的神秘面纱

拿到一个工具，我们第一时间需要弄明白的，就是这个工具到底能够帮助我们解决什么问题。比如锤子，砸得了鸡蛋打得了电话，比如苹果，不但能吃还能玩。那么 Vuex 呢，如果把 Vue.js 比喻成路人（走路的人）的话，那么 Vuex 就是他的桑塔纳，如果他想去隔壁买包烟，那走过去就行了，开个车过去反而是一种负担，但是如果他想去几十公里的学校采花，那桑塔纳就得派上用场了，不然等他走过去，可能花儿都谢了。

当然，类比只是为了告诉我们 Vuex 的价值所在，那么在具体在实际的应用中，它能干什么？什么时候才需要翻它的牌呢？

我们先来看一段官方代码：

new Vue({
  // state  数据源
  data () {
    return {
      count: 0
    }
  },
  // view  视图
  template: `
    <div>{{ count }}</div>
  `,
  // actions  事件
  methods: {
    increment () {
      this.count++
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这是一个很简单的增长型计数功能页面，和 Vue.js (opens new window) 有一腿的，应该秒懂。通过事件 increment，实现 count 增长，然后渲染到界面上去。

这种方式其实就跟走路买烟一样，属于短途效应，官方称作为「单向数据流」，很好理解。

但是，情况变了，现在有两个页面 A 和 B，还有以下两个要求：

要求它们都能对 count 进行操控。
要求 A 修改了 count 后，B 要第一时间知道，B 修改后，A 也要第一时间知道。

怎么办？稍微有点开发经验的，就能够很容易的想到，把数据源 count 剥离开来，用一个全局变量或者全局单例的模式进行管理，这样不就在任何页面都可以很容易的取到这个状态了。

是啊，这尼玛就是 Vuex 背后的思想啊，它干的就是这个事情。是不是有一种被 Vuex 这个高大上的名号所坑害的感觉，不就是全局模型吗，不用它也同样可能搞定嘛。

是的，也可以搞定，就像没有桑塔纳，你也可以去学校看花一样，只是经历的过程不一样了。

Vuex 的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则，比如修改数据源 state、触发 actions 等等，都需要遵循它的规则，以此来达到让项目结构更加清晰且易于维护的目的。

那么我们再来看看官方的描述：

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

有没有瞬间清晰多了。

# 什么时候翻 Vuex 的牌

其实了解了 Vuex 要干的活以后，什么时候翻牌，那就容易选择得多了。就像前面的类比一样，去隔壁买包烟，你还开个桑塔纳，找停车位的时间，烟都抽完了。

所以，我们要根据项目的需要，来衡量短期和长期的效益，如果不打算开发大型的单页应用，那 Vuex 可能还是你的一个负担。对于一些不大不小的项目，自己又懒得走，开车又觉得麻烦，那你骑个共享单车过去也行嘛。

这里的共享单车指代的是官方中的一个简单的 store 模式 (opens new window)，其实就是一个单纯的全局对象。

关于全局对象和 Vuex 之间的区别，官方写得还是比较通俗易懂的：

Vuex 和单纯的全局对象有以下两点不同：

1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2.你不能直接改变 store 中的状态。改变 store 中状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

# 简单示例

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11

每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

注意：如果 mutations 不知道是什么，没关系，后面会专门讲解到，可以单纯的理解为只能用它里面的方法来修改 state 中的数据。

store.commit('increment') // 调用 mutations 中的方法
console.log(store.state.count) // -> 1

1
2

为什么要这样设计的，官方也给出了具体的原因：

我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

# 二、Vuex旗下的State和Getter

# 先说两句

上一讲「Vuex 到底是个什么鬼」，已经完美诠释了 Vuex 的牛逼技能之所在（纯属自嗨）。如果把 Vuex 比喻成农药里面的刘备，那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄，而且他打的枪还是双排量的，认识到这一点后，那么接下来就是要了解他到底是如何打枪的，是左手打，还是右手打，还是双手一起端着枪打？

同样，我们已经知道了 Vuex 就如同一个全局的管理员一样，帮着我们统一管理着项目的共享数据，那它到底是通过什么样的方式去管理的呢？我们应该如何与这个管理员进行沟通和交流，才能有效的访问和操作这些共享数据呢？

# 再说一句

Vuex 的内脏由五部分组成：State、Getter、Mutation、Action 和 Module。关于这五个部分，我会分为多个章节来进行详细阐述，这一讲就先和大家一起彻底搞定 State 和 Getter。

当然，在实际应用中，这五个部分并不是必须的，你需要用到什么就添加什么。但是一般再怎么简单的 Vuex，也至少会由 State 和 Mutation 构成，否则你就该考虑 Vuex 是否有存在的必要了。

最后，温馨提示，文档示例代码使用了 ES2015 的语法，如果你还没了解过的话，先戳此了解了解 (opens new window)。

# 单一状态树

Vuex 使用的是「单一状态树」，根据官方的描述，可能有点懵圈，不过没关系，这里我们一起来详细了解下到底什么是「单一状态树」。抛开单一状态，我们先来看一下这里的树是什么意思。

如上图是一个公司的组织架构，它的这种层级其实就属于一种树形的结构，总经理就是树的主干，其他各部门或者职业，都属于树的分支。

一般情况下，一个公司只会有这么一个树形架构，如果有两个平等的总经理，那么公司在管理上很可能就会出现矛盾，下面的人到底听谁的呢，是吧！

好，现在咱们再来看下官方所叙述的「单一状态树」：

1、用一个对象（主干）就包含了全部的（分支）应用层级状态。

2、每个应用（公司）将仅仅包含一个 store 实例对象（主干）。

单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

# State

我们再回过头来看一下之前那个简单的 Store 示例代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

1
2
3
4
5
6
7
8
9
10

那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态，如下：

// 创建一个 Counter 组件
const Counter = {
  data() { return {} },
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

1
2
3
4
5
6
7
8
9
10

每当 store.state.count 变化的时候, 都会重新求取计算属性，并刷新界面。

需要注意的是，如果你把 store.state.count 放在 data 中， store.state.count 的变化是不会主动触发界面刷新的，当然，也不能直接这样：<div>｛｛store.state.count ｝｝</div> ，因为在模板中是无法直接访问到 store 对象的，所以这样写无疑会报错。

这种模式依赖于全局的管理员 store，如果模块多了，意味着每个模块或者页面只要用到了这个 state 里面的数据，都得把 store 引入进来，这样的操作确实有点难受。当然，官方肯定是不允许有这样令人抓狂的操作出现的：

Vuex 通过 store 选项，提供了一种机制将状态从根组件 “注入” 到每一个子组件中（需调用 Vue.use(Vuex)）：

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，
  // 这可以把 store 的实例注入所有的子组件
  store,
  // 子组件
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

1
2
3
4
5
6
7
8
9
10
11
12
13

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现：

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

1
2
3
4
5
6
7
8

Vuex 的状态固然好用，但是也不要滥用：

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

# Getter

比如在一个组件中，我们需要把 state 中的日期 date 转换成星期几来展示：

computed: {
  weekDate () {
    return moment(this.$store.state.date).format('dddd'); 
  }
}

1
2
3
4
5

注意：这里的 moment (opens new window) 是一个第三方日期处理类库，使用之前需要导入。

如果只有一个组件需要这样做还好，但如果在很多组件中，都需要这么转换的话，那就得在每一个组件中都需要把这个函数复制过去。而且，一旦产品经理心情不好，不想用星期几来显示，想直接用 2018-10-30 11:12:23 这种方式来显示日期，那你就得在所有用到它的组件中去更改日期格式化的方法，岂不难受至极。就算你把它单独抽取出来作为一个公共的函数，各种导入也麻烦，最重要的是不好统一管理。

所以，这个时候，Vuex 又引入了一个牛逼的玩意儿，Getter。我们可以把它当成 store 中的计算属性（computed）。

就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

我们看看这两个例子，着重注意下里面的注释：

const store = new Vuex.Store({
  state: {
    date: new Date()
  },
  getters: {
    // Getter 接受 state 作为其第一个参数
    weekDate: state => {
      return moment(state.date).format('dddd'); 
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11

getters: {
  // Getter 还也可以接收 getters 作为第二个参数
  dateLength: (state, getters) => {
    return getters.weekDate.length;
  }
}

1
2
3
4
5
6

不但如此，Getter 还会将 store.getters 对象暴露出去，你可以以属性的形式访问这些值：

console.log(store.getters.weekDate)

我们可以很容易地在任何组件中使用它：

computed: {
  weekDate () {
    return this.$store.getters.weekDate
  }
}

1
2
3
4
5

现在需求又变了，每个模块要显示的 weekDate 的格式不一样，有的显示全部日期，有的需要显示星期几，怎么办？

好办，那就给 Getter 传参呗，但是怎么传呢？

因为 Getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的，所以是不能直接 store.getters.weekDate('MM Do YY')，因为 weekDate 并不是一个函数，它仅仅只是一个属性而已。

那么既然属性不能传参，怎么办呢？那我们就想办法把这个属性变成一个函数不就行了。

getters: {
  // 返回一个函数，就可以传参了
  weekDate: (state) => (fm) => {
    return moment(state.date).format(fm ? fm : 'dddd'); 
  }
}

1
2
3
4
5
6

使用如下：

store.getters.weekDate('MM Do YY')

# 三、Vuex旗下的Mutation

# 写在前面

上一讲「Vuex 旗下的 State 和 Getter」，告诉了我们怎么去使用仓库 store 中的状态数据。当然，光会用肯定还不够，大部分的应用场景还得对这些状态进行操控，那么具体如何操控呢，这就是这一讲要说的重点。

# 只有 mutation 能动 State

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    // 事件类型 type 为 increment
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12

注意，我们不能直接 store.mutations.increment() 来调用，Vuex 规定必须使用 store.commit 来触发对应 type 的方法：

store.commit('increment')

# 传参

我们还可以向 store.commit 传入额外的参数：

mutations: {
  increment (state, n) {
    state.count += n
  }
}

// 调用
store.commit('increment', 10)

1
2
3
4
5
6
7
8

mutation 中的这个额外的参数，官方给它还取了一个高大上的名字：载荷（payload）。说实话，第一次在文档中看到这个标题「提交载荷」，真的就不想往下看了。

我们往往不是败给了这些生涩的概念，而是败给了自己内心的恐惧。

大多数情况下，载荷是一个对象，能够让我们更加易读：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

1
2
3
4
5

关于提交的方式，有两种：

// 1、把载荷和type分开提交
store.commit('increment', {
  amount: 10
})

// 2、整个对象都作为载荷传给 mutation 函数
store.commit({
  type: 'increment',
  amount: 10
})

1
2
3
4
5
6
7
8
9
10

当然，使用哪种方式没有绝对的界限，纯看自己的喜好，就我个人而言，还是比较倾向于使用第二种姿势，放在一起更实在。

# 修改规则

简单修改基础类型的状态数据倒是简单，没什么限制，但是如果修改的是对象，那就要注意了。比如这个例子：

const store = new Vuex.Store({
  state: {
    student: {
      name: '小明',
      sex: '女'
    }
  }
})

1
2
3
4
5
6
7
8

这个时候，我们如果想要给 student 添加一个年龄 age: 18 属性，怎么办呢？

是的，直接在 sex 下面把这个字段加上去不就行了，能这样当然最好了。但是如果我们要动态的修改呢？那就得遵循 Vue 的规则了。如下：

mutations: {
  addAge (state) {
    Vue.set(state.student, 'age', 18)
    // 或者：
    // state.student = { ...state.student, age: 18 }
  }
}

1
2
3
4
5
6
7

以上就是给对象添加属性的两种方式，当然，对于已添加的对象，如果想修改具体值的话，直接更改就是，比如 state.student.age=20 即可。

至于为什么要这样，之前我们了解过，因为 store 中的状态是响应式的，当我们更改状态数据的时候，监视状态的 Vue 组件也会自动更新，所以 Vuex 中的 mutation 也需要与使用 Vue 一样遵守这些规则。

# 使用常量

就是使用常量来替代 mutation 事件的名字。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

1
2

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13

可能有人会有疑问啊，这样做到底有啥用，还得多创建个类型文件，用的时候还要导入进来，不嫌麻烦吗！

我们看看，mutation 是怎么调用的：store.commit('increment')，可以发现，这里 commit 提交的方法 increment，是以字符串的形式代入的。如果项目小，一个人开发的话倒还好，但是项目大了，编写代码的人多了，那就麻烦了，因为需要 commit 的方法一多，就会显得特别混乱，而且以字符串形式代入的话，一旦出了错，很难排查。

所以，对于多人合作的大项目，最好还是用常量的形式来处理 mutation，对于小项目倒是无所谓，想偷懒的随意就好。

# 必须是同步函数

一定要记住，Mutation 必须是同步函数。为什么呢？

前面说了，我们之所以要通过提交 mutation 的方式来改变状态数据，是因为我们想要更明确地追踪到状态的变化。如果像下面这样异步的话：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

1
2
3
4
5
6
7

我们就不知道什么时候状态会发生改变，所以也就无法追踪了，这与 Mutation 的设计初心相悖，所以强制规定它必须是同步函数。

store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。

1
2

# 四、Vuex旗下的Action

# 写在前面

通过上一讲「Vuex 旗下的 Mutation」，我们知道了如何去修改 State 的数据，而且只能通过 Mutation 去提交修改，另外还了解到了 Mutation 必须是同步函数，那么如果需求当中必须要用到异步函数怎么办？

好办，那就轮到 Action 上场了。

# 简单介绍

Action 类似于 mutation，不同在于：

1、Action 提交的是 mutation，而不是直接变更状态。 2、Action 可以包含任意异步操作。

看一个简单的 action 示例：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可以看到，Action 函数接受一个 context 参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性，但是他们并不是同一个实例，后面学习 Modules 的时候会介绍它们为什么不一样。

所以在这里可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

当然，为了代码简化，我们可以使用 ES2015 的参数解构 (opens new window) 来直接展开，便于 commit、state 等多次调用。如下：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

1
2
3
4
5

# 分发 Action

store.dispatch('increment')

Mutation 通过 store.commit 触发，那么 Action 则通过 store.dispatch 方法触发。乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

1
2
3
4
5
6
7

和 Mutation 分发的方式异曲同工，这是注意这里是 dispatch：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

1
2
3
4
5
6
7
8
9
10

来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutation：

actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求，然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意示例中正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。

# 组合 Action

Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？

首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

不知道什么是 Promise 的，可以戳此了解下 (opens new window)。

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

1
2
3
4
5
6
7
8
9
10

调用:

store.dispatch('actionA').then(() => {
  // ...
})

1
2
3

当然，也可以这样：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

1
2
3
4
5
6
7
8

我们还可以利用 async / await (opens new window) 的方式组合 action ：

// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

1
2
3
4
5
6
7
8
9
10

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

我们在实际项目中经常的会遇到这种情况，比如说你现在想要处理 B 事件，但是 B 事件需要一种资源才能进行，而这种资源必须通过 A 事件来获得。这个时候，我们就需要组合 Action 来处理这些事件了。

# 五、Vuex的小帮手

# 先说两句

前面已经讲完了 Vuex 下的 State、Getter、Mutation 及 Action 这四驾马车，不知道大家是否已经理解。当然，要想真正熟练掌握的话，还是需要不断的练习和动手实践才行。

其实只要把这四驾马车完全熟练驾驭了，那么应对一些中小型的项目，基本上就已经没啥问题了，后面的 Module 这架终极马车，其实是为了搞定那些稍微大型复杂一点的项目，避免 store 里面的数据太多，难以管理而设计，这驾马车稍微比较抽象，不太好驾驭，我们下一讲再来详细的去剖解它。

Vue 里面的很多配套设施，在使用体验上一直都追求着简洁，追求着极致，哪里不爽改哪里，所以这也是为什么 Vue 能够长时间深得民心的一个很重要的原因所在。那么这一讲，主要就和大家简单的聊一聊 Vuex 的一些常用的辅助函数。

# mapState

通过前面的学习，我们知道，从 store 实例中读取状态最简单的方法就是在计算属性 (opens new window)中返回某个状态。

export default {
  ...
  computed: {
      a () {
        return store.state.a
      },
      b () {
        return store.state.b
      },
      c () {
        return store.state.c
      },
      ...
   }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

当然，这样是没问题的，但是总感觉写起来很难受，看起来更难受是吧！既然这么容易我们就感受到了，Vuex 能感受不到吗，能忍得了吗？

绝对不能忍，所以 mapState 辅助函数被创造了出来，用来搞定这个人人为之咬牙切齿的痛点。

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    a: state => state.a,
    b: state => state.b,
    c: state => state.c,

    // 传字符串参数 'b'
    // 等同于 `state => state.b`
    bAlias: 'b',

    // 为了能够使用 `this` 获取局部状态
    // 必须使用常规函数
    cInfo (state) {
      return state.c + this.info
    }
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

通过上面的示例，可以了解到，我们可以直接把需要用到的状态全部存放在 mapState 里面进行统一管理，而且还可以取别名，做额外的操作等等。

如果所映射的计算属性名称与 state 的子节点名称相同时，我们还可以更加简化，给 mapState 传一个字符串数组：

computed: mapState([
  // 映射 this.a 为 store.state.a
  'a',
  'b',
  'c'
])

1
2
3
4
5
6

因为 computed 这个计算属性接收的是一个对象，所以由上面的示例代码可以看出，mapState 函数返回的是一个对象，现在如果想要和局部的计算属性混合使用的话，可以使用 ES6 的语法这样写来大大简化：

computed: {
  localComputed () { 
    ...
  },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

1
2
3
4
5
6
7
8
9

了解了 mapState 辅助函数后，接下来的几个辅助函数的用法也基本上都差不多了，我们继续往下看。

# mapGetters

这个和 mapState 基本上没啥区别，简单看下官方的例子，就懂了：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

取个别名，那就用对象的形式，以下示例的意思就是把 this.doneCount映射为 this.$store.getters.doneTodosCount。

mapGetters({
  doneCount: 'doneTodosCount'
})

1
2
3

# mapMutations

直接看示例代码：

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      // 将 `this.increment()` 映射为 
      // `this.$store.commit('increment')`
      'increment', 
      // `mapMutations` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store.commit('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapMutations({
      // 将 `this.add()` 映射为 
      // `this.$store.commit('increment')`
      add: 'increment' 
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

简直不要太好用，连载荷也可以直接支持。

# mapActions

和 mapMutations 用法一模一样，换个名字即可。

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      // 将 `this.increment()` 映射为 
      // `this.$store. dispatch('increment')`
      'increment', 
      // `mapActions` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store. dispatch('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapActions({
      // 将 `this.add()` 映射为 
      // `this.$store. dispatch('increment')`
      add: 'increment' 
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

想要在组件中调用，直接 this.xxx 就完了。

# 写在最后

不得不说，Vuex 在使用体验上面真的是用心良苦，用好这些辅助函数，将会大大增加我们的开发效率，当然，有任何问题，欢迎留言，咱们一起交流。

# 六、Vuex的管理员Module（实战篇）

# 写在前面

这一讲是 Vuex 基础篇的最后一讲，也是最为复杂的一讲。如果按照官方来的话，对于新手可能有点难以接受，所以想了下，决定干脆多花点时间，用一个简单的例子来讲解，顺便也复习一下之前的知识点。

首先还是得先了解下 Module 的背景。我们知道，Vuex 使用的是单一状态树，应用的所有状态会集中到一个对象中。如果项目比较大，那么相应的状态数据肯定就会更多，这样的话，store 对象就会变得相当的臃肿，非常难管理。

这就好比一家公司只有老板一个人来管理一样。如果小公司倒还好，公司要是稍微大一点，那就麻烦了。这个时候，老板就会成立各大部门，并给各大部门安排一个主管，把管理的任务分派下去，然后有什么事情需要处理的话，只需要跟这几个主管沟通，由主管再把任务分配下去就行了，这就大大提高了工作效率，也减轻了老板的负担。

那么同样的道理，Module 其实就承担了部门管理员的角色，而 store 就是老板。理解了这一层，那么后面就好办多了，接下来，咱们就一步一步动起手来开始实践。

# 6.1 准备工作

这里我们使用官方提供的 vue-cli (opens new window) 来建一个项目「vuex-test」。当然，先得安装 vue-cli：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

1
2
3

安装完成后，就可以使用以下命令来创建项目了：

vue create vuex-test

还可以使用图形化界面来创建：

vue ui

具体关于 vue-cli 的使用方法可以去官方查看，戳此进入 (opens new window) 。

项目创建完成以后，找到项目安装的目录，并打开控制台执行：

// 先定位到项目的目录下
cd vuex-test

// 然后安装 vuex
npm install vuex --save

// 运行一下
npm run serve

1
2
3
4
5
6
7
8

运行完成，可以打开 http://localhost:8080/ 看下效果。

最后大家找一个自己比较比较喜欢的 IDE 来打开这个项目，方便查看和编辑。我个人比较喜欢用 WebStorm，这里也推荐给大家。

# 6.2 简单入手

这里，我们只看 src 目录，其他的暂时不管。组件 components 不在这一讲的范围内，所以也可以忽视，资源 assets 也没什么可说的，就是如果有图片或者视频什么的话，都放在这个文件夹里面就是了。

我们打开 App.vue 文件，去掉组件的相关代码，并编写一点简单的 vue 代码。修改如下：

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />
        <h1>{{name}}</h1>
        <button @click="modifyNameAction">修改名字</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: 'Lucy'
            }
        },

        methods: {
            modifyNameAction() {
                this.name = "bighone"
            }
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

现在我们引入 Vuex ，用它来管理状态数据，比如这里的 name。首先在 src 中新建一个 store.js 文件，并写下如下熟悉的代码：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        name: 'Lucy',
    },
    mutations: {
        setName(state, newName) {
            state.name = newName;
        }
    },
    actions: {
        modifyName({commit}, newName) {
            commit('setName', newName);
        }
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

然后，在 main.js 中导入 store，并全局注入:

import store from './store';
// ...
new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

1
2
3
4
5
6

最后修改 App.vue 中的代码如下：

<script>
    import {mapState, mapActions} from 'vuex';
    export default {
        computed: {
            ...mapState(['name'])
        },

        methods: {
            ...mapActions(['modifyName']),

            modifyNameAction() {
                this.modifyName('bighone');
            }
        },
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

想必弄懂这些代码，应该都是没啥问题的，因为这些都是 Vuex 很基础的知识点，这里实操来简单回顾一下，加深印象。如果看不懂，那证明之前的基础知识还没掌握。

# 6.3 引入 Module

在前言里面，我们已经了 Module 的基本职责，那么具体如何使用呢？

Vuex 允许我们将 store 分割成大大小小的对象，每个对象也都拥有自己的 state、getter、mutation、action，这个对象我们把它叫做 module（模块），在模块中还可以继续嵌套子模块、子子模块 ……

现在在 src 里面建个文件夹，命名为 module，然后再里面新建一个 moduleA.js 文件，并编写如下代码：

export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

1
2
3
4
5
6
7
8

如上，再建一个 moduleB.js 文件，这里就不重复了。

然后打开 store.js 文件，导入这两个 module ：

import moduleA from './module/moduleA';
import moduleB from './module/moduleB';

export default new Vuex.Store({
    modules: {
        moduleA, moduleB,
    },
    // ...
}

1
2
3
4
5
6
7
8
9

这个时候，store 中已经注入了两个子模块 moduleA moduleB，我们可以在 App.vue 中通过 this.$store.state.moduleA.text 这种方式来直接访问模块中的 state 数据。如下修改：

// ...
computed: {
    ...mapState({
        name: state => state.moduleA.text
    }),
},
// ...

1
2
3
4
5
6
7

由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。

但是注意了：

模块内部的 action、mutation 和 getter 默认可是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。

这里以 mutation 的响应为例，给 moduleA 和 moduleB 分别新增一个 mutations，如下：

mutations: {
    setText(state) {
        state.text = 'A'
    }
},

1
2
3
4
5

moduleB 和上面一样，把文本名称修改一下即可，这里就不重复了。然后回到 App.vue 中，修改如下：

<script>
    import {mapState, mapMutations} from 'vuex';
    export default {
        computed: {
            ...mapState({
                name: state => (state.moduleA.text + '和' + state.moduleB.text)
            }),
        },
        methods: {
            ...mapMutations(['setText']),
            modifyNameAction() {
                this.setText();
            }
        },
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

运行然后点击修改，我们会发现模块 A 和 B 中的 text 值都改变了。当然，action 的用法一模一样，大家也可以试试。

如果模块之间的数据有交集的话，那么我们其实就可以通过这种方式，来同步更新模块之间的数据，虽然看起来非常的方便，但是用的时候可一定要谨慎，这种处理方式一旦没用好，遇到错误，排查起来还是比较有难度的。

# 6.4 访问根节点

我们已经知晓，模块内部的 state 是局部的，只属于模块本身所有。那么如果我们要想在模块中访问 store 根节点的数据 state，怎么办呢？

很简单，我们可以在模块内部的 getter 和 action 中，通过 rootState 这个参数来获取。接下来，我们给 modelA.js 文件添加一点代码。

export default {
    // ...
    getters: {
        // 注意:rootState必须是第三个参数
        detail(state, getters, rootState) {
            return state.text + '-' + rootState.name;
        }
    },
    actions: {
        callAction({state, rootState}) {
            alert(state.text + '-' + rootState.name);
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后修改 App.vue ：

<script>
    import {mapActions, mapGetters} from 'vuex';
    export default {
        computed: {
            ...mapGetters({
                name: 'detail'
            }),
        },
        methods: {
            ...mapActions(['callAction']),
            modifyNameAction() {
                this.callAction();
            }
        },
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

然后运行你会发现，根节点的数据已经被我们获取到了。这里需要注意的是在 getters 中，rootState 是以第三个参数暴露出来的，另外，还有第四个参数 rootGetters，用来获得根节点的 getters 信息，这里就不演示了，感兴趣自己可以去尝试。唯一要强调的就是千万不要弄错参数的位置了。

当然，action 中也能接收到 rootGetters，但是在 action 中，由于它接收过来的数据都被包在 context 对象中的，所以解包出来没有什么顺序的限制。

# 6.5 命名空间

前面我们已经知道了，模块内部的 action、mutation 和 getter 默认是注册在全局命名空间的。如果我们只想让他们在当前的模块中生效，应该怎么办呢？

通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

我们在 moduleA.js 中添加 namespaced: true。

export default {
    namespaced: true,
    // ...
}

1
2
3
4

这个时候再去运行代码，你会发现如下错误：

[vuex] unknown getter: detail

在全局 getter 中已经找不到 detail 的这个方法了，因为它的路劲已经改变了，不再属于全局，仅仅只属于 moduleA 了。所以，这个时候，如果我们想要访问它，必须带上路劲才行。修改 App.vue 如下：

<script>
    import {mapActions, mapGetters} from 'vuex';
    export default {
        computed: {
            ...mapGetters({
                name: 'moduleA/detail'
            }),
        },
        methods: {
            ...mapActions({
                call: 'moduleA/callAction'
            }),
            modifyNameAction() {
                this.call();
            }
        },
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意，如果一个模块启用了命名空间，那么它里面的 getter 和 action 中收到的 getter，dispatch 和 commit 也都是局部化的，不需要在同一模块内额外添加空间名前缀。也就是说，更改 namespaced 属性后不需要修改模块内的任何代码。

那么我们如何在带命名空间的模块内访问全局内容呢？

通过前面的学习，我们已经了解到：

如果你希望使用全局 state 和 getter，rootState 和 rootGetter 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

现在如果想要在全局命名空间内分发 action 或提交 mutation 的话，那么我们只需要将将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。

export default {
    namespaced: true,
    // ...
    actions: {
        callAction({state, commit, rootState}) {
            commit('setName', '改变', {root: true});
            alert(state.text + '-' + rootState.name);
        }
    }
}

1
2
3
4
5
6
7
8
9
10

接下来看看如何在带命名空间的模块内注册全局 action。

若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中。

写法稍微有点变化，我们来看看，修改 moduleA.js，如下：

export default {
    namespaced: true,
    // ...
    actions: {
        callAction: {
            root: true,
            handler (namespacedContext, payload) {
                let {state, commit} = namespacedContext;
                commit('setText');
                alert(state.text);
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

简单解释下，这里的 namespacedContext 就相当于当前模块的上下文对象，payload 是调用的时候所传入的参数，当然也叫载荷。

示例就讲到这里，接下来看看带命名空间的绑定函数。

关于 mapState, mapGetters, mapActions 和 mapMutations 这些函数如何来绑定带命名空间的模块，上面示例代码中其实已经都写过了，这里再看看另外几种更简便的写法，先看看之前的写法。

这里就用官方的示例代码举例说明：

computed: {
    ...mapState({
        a: state => state.some.nested.module.a,
        b: state => state.some.nested.module.b
    })
},
methods: {
    ...mapActions([
        // -> this['some/nested/module/foo']()
        'some/nested/module/foo', 
        // -> this['some/nested/module/bar']()
        'some/nested/module/bar' 
    ])
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

更优雅的写法：

computed: {
    ...mapState('some/nested/module', {
        a: state => state.a,
        b: state => state.b
    })
},
methods: {
    ...mapActions('some/nested/module', [
        'foo', // -> this.foo()
        'bar' // -> this.bar()
    ])
}

1
2
3
4
5
6
7
8
9
10
11
12

将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。

我们还可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 6.6 模块的动态注册

这一章节，官网讲得比较清楚，所以直接搬过来了。

在 store 创建之后，可以使用 store.registerModule 方法动态的注册模块：

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

1
2
3
4
5
6
7
8

之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。

模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如，vuex-router-sync 插件就是通过动态注册模块将 vue-router 和 vuex 结合在一起，实现应用的路由状态管理。

你也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）。

在注册一个新 module 时，你很有可能想保留过去的 state，例如从一个服务端渲染的应用保留 state。你可以通过 preserveState 选项将其归档：store.registerModule('a', module, { preserveState: true })。

# 6.7 模块重用

就一点，重用会导致模块中的数据 state 被污染，所以和 Vue 中的 data 一样，也使用一个函数来申明 state 即可。

const MyReusableModule = {
  state () {
    return {
      foo: 'bar'
    }
  },
  //...
}

1
2
3
4
5
6
7
8

# 写在最后

演示代码写的没啥逻辑，还请见谅，主要还是为了帮助大家更好的理解 Module 的用法，如果有不理解的地方，欢迎留言告知。

那么到这里，Vuex 的核心概念就已经全部讲完了。不知道大家掌握的如何，虽然这套框架有点抽象，但其实只要我们真的用心去学了，要弄懂它也是很容易的。不过光看懂还是不够，一定要在项目中多运用，多实操才能够掌握的更加牢固。

转载声明：

作者：大宏说链接：https://www.jianshu.com/p/b79d1c332a20