Vuex实践

本文来自网易云社区

作者：刘凌阳

前言

2017年对于Vue注定是不平凡的一年。凭借着自身简介、轻量、快速等特点，Vue俨然成为最火的前端MVVM开发框架。随着Vue2.0的release，越来越多的项目开始采用Vue作为他们的前端框架。而作为Vue生态中最重要的一环，Vuex渐渐进入大家的视野。

数据管理模式

在正式开始介绍Vuex之前，有必要介绍一下数据管理模式的前世今生。

当你在开发应用程序时，你一定会分解出很多组件进行开发，而各个组件之间想必在逻辑上多少是有关系的。那么组件之间的“通信”，就成了待解决问题。以前我们试图用事件广播来做，但随之而来的问题是，在应用不断的扩展、变化中，事件变得越来越复杂，越来越不可预料，以至于越来越难调试，越来越难追踪错误。这当然不是我们想要的，我们希望应用的各个部分都易维护、可扩展、好调试、能预测。于是数据管理模式应运而生。

图1是最简单的组件关系，b是a的子组件，而c是b的子组件。在我们不引入任何数据管理模式之前，c组件要拿到a组件的数据只能由a先传给b，在由b传给c。如果组件树变得复杂，可想而知这将是一场灾难。看似严谨的父子结构其实严格限制了数据的流动方式。

图2是最简单的数据管理模式，所有数据将统一交给全局store来管理。a和c组件现在直接修改store里的数据，并且通过mapState从store中抓取自己感兴趣的数据到自己的组件中。而b组件，如果它对a、c组件的数据毫无兴趣，则可以做到完全解耦。

随着数据管理的进一步发展和演变，有一种叫单向数据流的东西冒了出来。图3就是一个表示“单向数据流”理念的极简示意。单向数据流要求各组件间的数据走向永远是单向的，可预期的。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交Actions。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够更好地了解我们的应用。

这次我们的主人公Vuex可以说是单向数据流的最佳实践者。

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想，就是前面所说的单向数据流。图4就是Vuex实现单向数据流的示意图。

接下来，我们将会更深入地探讨一些核心概念。让我们先从Store概念开始。

Store

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state) 。

安装 Vuex 之后，让我们来创建一个最简单的 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：

现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

State

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

Getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 会暴露为 store.getters 对象：

Mutation

Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，payload作为第二个参数（额外的参数）：