摘要
来自摩拜前端团队的 bing
本文主要了解 Vuex 的整个数据流向及各模块之间的触发使用。
欢迎留言并分享 Vuex 使用中遇到的坑，欢迎批评指正。其他前端干货敬请关注我司微信公众号 - 《前端新视野》。
日常开发中一般我们都会接触到组件化的概念，将一些通用的模块封装成组件去复用，提高开发效率，组件中父子 组件、兄弟组件、跨级组件等组件之间的通信是我们必须要去关注的。
但当我们的组件非常复杂，嵌套层级很深的时候：
-
父组件给子组件不得不将
props一层一层的传递下去 -
子组件同样也要利用
$emit事件机制层层注册
数据最终变的难以维护
这时我们可以引入
Vuex来管理状态（数据）。
一、Vuex 是什么
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
通俗一点的话说就是：
Vue 应用中统一管理数据的地方。
Vuex 的特点是：
把数据单独隔离 -- 意味着它有自己的生态系统，有固定的输入和输出，
图一是整个 Vuex 的数据流向及触发过程示意：
图一
其中：
-
Actions作为数据的输入 -
State作为数据的输出。
二、数据流向
2.1 Components 收集用户反馈触发 Actions
图一中 Actions 是负责处理从 Vue Components 接收到的用户行为的模块。
-
调用其他
action -
发送异步请求以及提交（commit）
mutations
都是在这个模块中操作。
2.1.1 定义 Action
要点：
action
函数接受一个与store实例具有相同方法和属性的 context 对象；因为
action通常是异步的，可以结合Promise来组合多个action来处理复杂的异步流程。
actions:{
// 基础的action
addTodoOne(context, todo){
if(todo.value != ""){
context.commit("ADD_TODO", todo);
}
},
// 解构赋值
addTodoTwo({ commit }, todo){
if(todo.value != ""){
commit("ADD_TODO", todo);
}
},
// 异步调用
addTodoThree({ dispatch, commit}, todo){
if(todo.value != ""){
commit('ADD_TODO', todo)
return dispatch('asyncAddTodo', todo).then(() => {
commit('ADD_TODO_ASYNC', todo)
})
}
},
asyncAddTodo ({commit}, todo) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
}
},
这里：注意一下参数的不同
context 里面有：
-
dispatch -- 调用其他 action
-
commit -- 调用 mutation
2.1.2 触发 Action
定义好的 action 怎样在 Component 中触发呢？
<button type
="button" class="btn btn-success btn-lg btn-block"
@click="addTodos"> 添加 </button>
<script>
import {mapActions} from "vuex";
export default{
...
methods:{
// 用户行为
addTodos(){
let todo = {
value: this.value,
id: ++this.id
};
this.value = "";
// 触发Action 方式一
this.$store.dispatch("addTodo", todo);
// 触发Action 方式二 、addTodo为 mapActions 函数返回
this.addTodo(todo)
// 触发Action 方式三、add为 mapActions 函数返回
this.add(todo)
},
...mapActions([
'addTodo',
]),
...mapActions({
add: 'addTodo'
})
}
}
</script>
最基本的触发方式：
this.$store.dispatch("addTodo", todo);
方式二和三种中使用 '...' 扩展运算符将 mapActions 返回值混入到 methods 中。
mapActions 是 Vuex 提供的辅助函数，可以有效精简我们的代码。
mapActions可以接受一个数组或一个对象在使用
module时，可以接受module路径跟简写对象，暂不展开，详情请阅读官方文档https://vuex.vuejs.org/zh/guide/modules.html
// 调用 `this.addTodo()`方法映射为 `this.$store.dispatch('addTodo')`
...mapActions([
'addTodo',
]),
// 调用 `this.add()` 方法映射为 `this.$store.dispatch('addTodo')`
...mapActions({
add: 'addTodo'
})
2.2 Actions 提交（commit）Mutations，请求修改 State
2.2.1 定义 Mutation
要点：
mutation默认接受当前state为第一个参数；
mutation是修改state的唯一途径，并且是同步 执行，区别于action；最好提前在你的
Store中初始化好所有所需属性；当需要在对象上添加新属性时，你应该使用 Vue.set(obj, 'newProp', 123) ，使增加的新属性在 Vue 应用中是响应式 的；
官方推荐使用大写常量 来定义
mutation，统一管理，一目了然。
// mutation-type.js
export const ADD_TODO = 'ADD_TODO'
// store.js
import { ADD_TODO } form './mutation-type.js'
const store = new Vuex.Store({
state:{ ... },
getters:{ ... },
mutations:{
[ADD_TODO](state, todo) {
state.todos.push(todo);
Vue.set(state, 'newProp', 123)
}
},
actions:{ ... },
modules:{ ... }
});
2.2.2 触发 Mutation
注意： 1、
Component中触发一些简单的同步操作，可直接触发（commit）mutation2、若需要异步操作的则需要在
action中触发（commit）mutation
// component 中直接触发（commit）Mutation
<button class="btn btn-default btn-danger"
@click="delTodo(index)"> 删除 </button>
<script>
import { mapMutations } from "vuex";
export default{
...
methods: {
delTodo(index){
// 可以向commit传入额外的参数，
// 即mutation的(payload)
this.$store.commit("DEL_TODO", index)
},
// 将 `this.DEL_TODO()` 映射为
// `this.$store.commit('DEL_TODO')
...mapMutations([
'DEL_TODO'
]),
// 将 `this.testDel()` 映射为
// `this.$store.commit('DEL_TODO')
...mapMutations({
testDel: 'DEL_TODO'
})
}
}
</script>
// actions 中异步触发
...
actions:{
// 异步调用
addTodoThree({ dispatch, commit}, todo){
if(todo.value != ""){
commit('ADD_TODO', todo)
return dispatch('asyncAddTodo', todo).then(() => {
commit('ADD_TODO_ASYNC', todo)
})
}
},
asyncAddTodo ({commit}, todo) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
}
},
方式一：在组件的事件中直接调用
this.$store.commit("DEL_TODO",index)
方式二：异步操作在 action 中完成
2.3 Mutation 同步修改 State
// store.js
mutations:{
[ADD_TODO](state, todo) {
state.todos.push(todo);
Vue.set(state, 'newProp', 123)
},
[ADD_TODO_ASYNC](state, todo) {
state.todos.push(todo);
},
[DEL_TODO](state, index) {
state.todos.splice(index, 1);
}
},
2.4 State 改变后重新渲染（Render）Components
2.4.1 使用 State
Component 中是怎样绑定 state 的值呢？
-
import
{mapState
, mapGetters}
from "vuex";
-
export default
{
-
name
: 'app'
,
-
data
() {
...
},
-
computed
:{
-
// 第一种
-
state1
() {
-
return this
.$store.
state.state1
-
},
-
// 第二种
-
// 当计算属性的名称与state的状态名称一样时，可以省写
-
// 映射 this.state2 为 store.state.state2
-
...mapState({
-
state2
: state =>
state.state2
-
}),
-
// 第三种 同名state也可以用数组的方式省写
-
// 映射 this.state2 为 store.state.state2
-
...mapState([
-
'state2'
-
]),
-
}
2.4.2 使用 Getter
如果想要从 Store 中的 state 去衍生出一些状态，可以使用 getter，相当于 state 的计算属性
可以在实例化的时候和 state 并行，定义一个 getters
// store.js
const store = new Vuex.Store({
state: { ... },
getters: {
count: state => {
return state.todos.length + 10;
}
}
})
注意：getter count 的第二个参数也可以关注一下
在组件中像下面这样调用：
从 $store.getters 里面获取
// 组件中
computed:{
// 第一种
todoCount () {
return this.$store.getters.count
},
// 第二种
...mapGetters({
count: 'count'
}),
// 第三种
...mapGetters([
'count'
])
},
至此，一个完整的数据流向就闭环了。
总结
本文主要介绍了从用户触发开始到再次渲染更新组件结束过程中， Vuex 的数据流向及各模块的使用方式，希望对初学 Vuex 或 打算使用 Vuex 管理数据的朋友有所帮助，有任何问题或讲述不清的地方，请留言相告。
最后来个硬广：
🌟 我们出书啦，欢迎点击阅读原文试读和购买👇
