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
ActionsView用来改变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库里加个星,如果有问题可以在下方评论里讨论讨论😀