# Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
# 什么是状态管理模式?
简单的理解就是统一集中管理和维护所有vue组件的可变化状态。
# 什么时候需要它?
当我们的应用很大状态很多,且多个页面都有共享使用同一状态时,这种情况下我们可以考虑使用Vuex可以更好的在组件外部去管理状态,Vuex 将会成为自然而然的选择。
# Vuex使用示例
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
getCount(state) {
return state.count + 2;
}
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
add (ctx, data) {
ctx.commit('increment', data);
}
}
})
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Vuex的各个模块
state:用于存储数据,是store中的唯一数据源。
getters:如同vue组件中的计算属性,基于state的数据进行二次加工,常用于数据的筛选和多个数据的相关性进行计算。
mutations:用于存储对于state的修改同步方法,是修改state数据的唯一途径,且不能用于处理异步事件。
actions:类似于mutation,用于提交mutation来变更状态,而不能直接变更状态,可以包含任意异步操作。
modules:类似于命名空间,用于项目中将各个模块的状态分开定义和操作,便于维护。
# 为什么要用Vuex,而不是全局维护一个全局变量?
- 全局变量
- 无响应式,无法被监听。
- 可能出现命名污染。
- vuex的优点
- 响应式的数据。
- 模块化,抽象业务逻辑,减少重复代码。
- 可以被vue-devtools跟踪操作。
# 疑问二三🤔️
- 为什么只能使用mutation来修改数据而不能使用action?
Vuex这一限制其实也是出于代码设计考虑,action和mutation各司其事,本质上也是遵守了“单一职责”原则。(具体细节课、可阅读源码进行分析理解)
- 为什么mutation只能处理同步事件,action处理异步事件。
主要是为了方便我们debug,如果项目比较大,复杂度较高,在开发过程中,我们一般会依赖vue-devtools进行调试,为了方便追踪,vuex的每一次提交mutation,当函数执行时都会被记录一次,所以要求mutation内只能存放同步事件,而如果存放的是异步事件的时候,函数执行vue-devtools记录了,但是事实上并没有得到最终的一个结果,导致记录的一个执行时间顺序就不对,导致一些意外情况增加调试难度。