vue2.0一起在懵逼的海洋里越陷越深（四）

前言

本文章系列：vue2.0一起在懵逼的海洋里越陷越深 (http://leenty.com/tags/vuejs/)
前面一篇讲了vue-router的router-link,
有读者说希望能先看到vuex的文章
其实vuex在我的vue2.0的demo里已经在使用了
想想确实应该先来点vuex的了，因为有些有关的状态管理急需vuex的加入
好，那么这次就先上vuex吧！

正文

OK！先介绍下vuex
vuex是vuejs的状态管理方案
因为vuex有些复杂，一般应用在较复杂的状态环境下，如果是比较简单的应用就不需要安装vuex了

vuex单向数据流

vuex单向数据流
如上图所示是vuex单向数据流的流程

我知道，如果是第一次接触这玩意，到这就懵逼了，就像我第一次看文档一样
vuex单向数据流

下面解释下State
前面说了vuex是vuejs的状态管理方案，这里的状态就是图中的state
在平时写写前端的过程中，都会涉及到状态的问题，
比如你看到了一篇文章写的不错，就想要收藏，
然后又对作者有些兴趣，于是又加了关注，当然这些最后都是需要前端来表达出来
这里面就涉及了两个状态就是收藏与关注
这里的收藏与关注我们可以将其用一个变量来表示，当然如这两种只存在两个相对状态的用布尔值(bool)来表示就可以了

然后是view
view就是视图,也就是前端所写的页面，前面的state就可以在view里面得到体现，即是你看到的是否关注了作者

而后是Actions
Actions是View用来改变State的方法，通过改变State从而改变View的显示

这么说有些抽象，打个比方
假设学生小明生病了
小明要向班主任请假(小明就是View，小明想改变自己的显示状态，从上学状态变成请假状态)
于是小明口头向班主任请假(请假就是Actions，小明通过请假这一个方法达到请假的目的)
班主任批准，小明请假成功(班主任就是State的提供者，小明通过请假方法使班主任改变小明的State状态)
着也就解释了为什么要有这个流程，有了这个流程就可以统一管理各个view的各个状态

vuex多个组件共享状态

先贴个流程图，懵逼是没啥关系的
vuex多个组件共享状态
可以看到这一张图比前面一张复杂了许多，其实里面的实线框就是上图的升级版

情况是这样，原来小明学校里这段时间许多同学得了流感，于是同学们一窝蜂的要求请假，
学校里因为人太多，又没有一个记录，人数清点不过来了，于是班主任要求请假必须提交请假条

好的，来解释下上图内的实线部分，之前的View在这里改名成了Vue Components,代表了多个组件(这里即是指多个同学)
包括小明在内的多个同学Vue Components都得了流感，一起想要请假Actions(他们即将共享一个请假状态)，小明代表多个同学写了一张请假条交给班主任(State提供者)签字同意(签字同意这个动作就是Mutations，触发了State的改变),班主任同意后统一给他们改变了State（请假成功）

这里的多了一个同步与异步的区别，其中Mutations只受理同步处理，而Actions就是执行异步操作的函数，作为代价，Actions不再能直接触发改变State状态，而是需通过Mutations来触发State的改变

情况是这样，因为不只是一个班的学生得了流感，请假的人比较多，学校Backend API需要做一个统计，于是请假需要得到学校专门的请假条的并通过学校签字才能生效，这里就有了虚线部分。
请假Actions改变State的方法不再是仅仅班主任签字就可以了，而是需要通过学校这个前提，于是Actions就变成了一个异步请求，需要得到学校Backend API的专门的请假条和签字同意后，才能向班主任提交改变State的申请

这里想要表达的意思就是，Vue Components改变自身状态需要通过Actions（有需要的话要向后端接口Backend API发送请求）来操作Mutations改变State从而改变自身状态。
至于图中没有说到的Devtools是一个开发者工具，是一个便于查看和管理vue应用以及vuex状态的浏览器插件。
你可以在里面看到你vue对象和vuex每一次的commit，commit后面会说到。还有你当前的应用状态
devtools
附上一个devtools库地址

架构vuex

项目结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
├── main.js
├── App.vue
├── components
│   ├── Home.vue
│   └── ...
└── store
    ├── index.js          # 组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    ├── types.js          # mutation命名空间
    └── modules
        ├── demo.js       # demo模块
        └── status.js     # 全局应用状态模块

结构可以根据个人需要进行调整

下面开始构建store/index.js
当然在这之前，如果没有安装vuex的需要先安装

1
npm i vuex -S

由于vuex的内容太多，这里先说基础用法
首先为store/index.js编写内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Vue from 'vue'
// 导入vue
import Vuex from 'vuex'
// 导入vuex

import status from './modules/status'
// 导入status模块（这是我管理全局应用状态的模块）
import demo from './modules/demo'
// 导入demo模块（这个的部分演示可以在http://vue2.leenty.com/demo/vuex_state/里看到）

Vue.use(Vuex)
// 告诉vue将要使用vuex

const debug = process.env.NODE_ENV !== 'production'
// env里去获取当前的环境是否需要开启严格模式
// 在发布环境开启严格模式会造成性能上不必要的损失

export default new Vuex.Store({
// 默认导出vuex模块
  modules: {
  // 导入模块
    status,
    demo
  },
  strict: debug
  // 是否开启严格模式
})

构建state模块
这里以demo.js为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import * as types from '../types'
// 导入mutations的命名空间

const state = {
// 定义state
  demoFollow: false,
  // 这里模拟的是关注的状态，布尔值表示是否关注
  demoFollowPending: false
  // 是否在请求中(actions是否在执行异步操作)
}

const getters = {
// 定义getters, getters是对state的扩展，可以以state衍生出其他状态
  demoFollowStatus: state => state.demoFollow ? '已关注' : '未关注'
  // demoFollowStatus是demoFollow的衍生量，将原来的布尔值映射为'已关注' : '未关注'
}

const mutations = {
// 只有mutations才能操作改变state，mutations是同步执行的
// 所以有关异步的操作请放在actions里执行
  [types.DEMO__VUEX_FOLLOW] (state, status = NaN) {
  // 使用预定义好的名字来写mutations方法
    state.demoFollow = isNaN(status) ? !state.demoFollow : status
  },
  [types.DEMO__VUEX_FOLLOW_PENDING] (state, status = NaN) {
  // 这里对status传值做了审查，如没有传，则对要改变的布尔值进行取反操作
    state.demoFollowPending = isNaN(status) ? !state.demoFollowPending : status
  }
}

const actions = {
// actions是可以执行异步操作的，操作完毕后触发mutations里的方法去改变state的状态
  demoFollowAjax ({commit}, status) {
    commit(types.DEMO__VUEX_FOLLOW_PENDING)
    // 在异步操作前通过mutations告诉应用，现在正在进行异步操作
    setTimeout(() => {
      // 利用延时函数模拟异步的ajax操作
      commit(types.DEMO__VUEX_FOLLOW_PENDING)
      // commit 是在actions里用来触发mutations的方法
      // 告诉应用，异步操作结束
      commit(types.DEMO__VUEX_FOLLOW, status)
      // 为关注按钮赋予新的状态
    }, 2000)
  }
}

export default {
// 导出整个demo模块
  state,
  getters,
  actions,
  mutations
}

这里解释下mutations里的方法的奇怪写法，我知道如果对es6于法了解不多这里是会懵逼的 

1
2
3
4
5
const mutations = {
  [types.DEMO__VUEX_FOLLOW] (state, status = NaN) {
    state.demoFollow = isNaN(status) ? !state.demoFollow : status
  }
}

这是对象内方法的简化写法，其中types.DEMO__VUEX_FOLLOW是在types.js里预定义的，内容如下

1
2
3
4
export const DEMO__VUEX_FOLLOW = 'DEMO__VUEX_FOLLOW'
export const DEMO__VUEX_FOLLOW_PENDING = 'DEMO__VUEX_FOLLOW_PENDING'
// 其实就是字符串集合，最后用 import * as types from '../types' 方法导入vuex模块里
// 就变成了一个types对象

上例中全部展开是这样的

1
2
3
4
5
6
7
8
9
10
11
const mutations = {
  [types.DEMO__VUEX_FOLLOW]: (state, status = NaN) => {
  // [types.DEMO__VUEX_FOLLOW]是提取types.DEMO__VUEX_FOLLOW的值的一种方式
  // 在这里[types.DEMO__VUEX_FOLLOW]提取出来就是types.js里预定义的'DEMO__VUEX_FOLLOW'
    if (isNaN(status){
      state.demoFollow = !state.demoFollow
    } else {
      state.demoFollow = status
    }
  }
}

好，到此为止，vuex就已经建立好了，下面就说如何使用了

应用状态的使用与改变

vuex提供了4个辅助函数

1
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

是分别用来获取State, Getters, Actions, Mutations的map方法
在vue Components里面你可以以这样的方式来导入需要使用的方法

这4个方法拥有统一的参数格式以及一个统一的返回格式
可以传入一个数组

1
2
3
4
5
6
mapGetters(['demoFollowStatus'])
// 此方法导出的是一个Getters对象
mapGetters({
  demoFollow: 'demoFollowStatus'
})
// 可以通过传入对象的形式来改变得到的getters方法名

同理，不同的map方法会导出各自的方法
其中mapState, mapGetters将会导出适用于computed的方法
而mapMutations, mapActions将会导出适用于methods的方法

这里以一个demo组件为例DemoVuexState.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
  // vue的计算属性，计算属性内方法的私有变量变动会触发这个属性的重新计算
    ...mapState({
      mapStateFollow: ({demo}) => demo.demoFollow,
      mapStateFollowPending: ({demo}) => demo.demoFollowPending
    }),
    // mapState()直接读取State里的状态内容
    ...mapGetters(['demoFollowStatus'])
    // mapGetters()通过getters转化state从而得到你想要的内容
  },
  methods: {
  // vue的方法，可以是一个事件的方法，也可以是一个vuex的方法，也可以是一个普通函数
    ...mapMutations(['DEMO__VUEX_FOLLOW']),
    // 同步的改变状态
    ...mapActions(['demoFollowAjax'])
    // 异步的改变状态
  }
}

这段代码是一个demo里的片段，效果大家可以看这个呆萌，如果开心了可以在github库里加个星，如果有问题可以在下方评论里讨论讨论😀

不会捣(xia)鼓(gao)的前端不是好全栈