Vue 系列之 Vuex 数据流向

摘要

来自摩拜前端团队的  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

   // store/index.js


这里： 注意一下参数的不同

context 里面有：

• dispatch -- 调用其他 action

• commit -- 调用 mutation

2.1.2 触发 Action

定义好的 action 怎样在 Component 中触发呢？

="button" class="btn btn-success btn-lg btn-block"


最基本的触发方式：

this.$store.dispatch("addTodo", todo);

方式二和三种中使用 '...'  扩展运算符将 mapActions  返回值混入到 methods 中。

mapActions   是 Vuex 提供的辅助函数，可以有效精简我们的代码。

mapActions 可以接受一个数组或一个对象

在使用 module 时，可以接受 module 路径跟简写对象，暂不展开，详情请阅读官方文档https://vuex.vuejs.org/zh/guide/modules.html

2.2 Actions 提交（commit）Mutations，请求修改 State

2.2.1 定义 Mutation

2.2.2 触发 Mutation

注意： 1、 Component 中触发一些简单的 同步 操作，可 直接触发（commit） mutation

2、若需要 异步操作 的则需要在 action 中触发（commit） mutation

方式一：在组件的事件中直接调用

this.$store.commit("DEL_TODO",index)

方式二：异步操作在 action 中完成

2.3 Mutation 同步修改 State

2.4 State 改变后重新渲染（Render）Components

2.4.1 使用 State

Component 中是怎样绑定  state 的值呢？

2.4.2 使用 Getter

如果想要从 Store 中的 state 去 衍生出一些状态 ，可以使用 getter ，相当于 state 的 计算属性

可以在实例化的时候和 state 并行，定义一个 getters

注意： getter count 的第二个参数也可以关注一下

在 组件 中像下面这样调用：

从 $store.getters 里面获取

至此，一个完整的数据流向就闭环了。

总结

本文主要介绍了从用户触发开始到再次渲染更新组件结束过程中， Vuex 的数据流向及各模块的使用方式，希望对初学 Vuex 或 打算使用 Vuex 管理数据的朋友有所帮助，有任何问题或讲述不清的地方，请留言相告。

最后来个硬广：

:star2: 我们出书啦，欢迎点击阅读原文试读和购买:point_down: