特别声明，本文根据@Hassan Djirdeh的《Managing State in Vue.js》一文所整理。
Vue中管理应用程序的状态有多种不同的方法，了解状态管理也是学习Vue知识的基础部分，也是很重要的一部分。从这篇文章开始，我们来开始学习Vue应用程序中的状态管理。在这篇文章中会先简单的介绍Vue应用程序中状态管理的大多数方法。希望对Vue的学习者有所帮助。
状态管理
Vue组件是Vue应用程序的构建中的一部分，允许我们在其中结合标记（HTML）、样式（CSS）和逻辑（JavaScript）。
接下来的示例将以单文件构建Vue组件的方式向大家呈现，该组件显示data属性中numbers中的一系列数字：
<!-- NumberComponent.vue -->
<template>
<div>
<h2>The numbers are {{ numbers }}</h2>
</div>
</template>
<script>
export default {
name: 'NumberComponent',
data: () => ({
numbers: [1, 2, 3]
})
}
</script>
效果如下：
每个Vue组件都包含一个data()函数，用于要响应的组件。如果模板中使用的data()属性值发生更改，组件视图将重新呈现以显示更改。
在上面的示例中，numbers是存储在data()函数中的一个数组。如果另一个组件要访问data()函数中的numbers，该怎么办呢？例如，我们可能需要一个组件负责显示numbers（比如上面的示例），另一个组件负责操作numbers的值。
如果我们想在多个组件之间共享numbers，那么numbers则不仅仅是组件组别的data，而是应用程序级别的data。这就把我们带到了状态管理的主题 —— 应用程序级别数据的管理。
在我们讨论如何在应用程序中管理状态之前，我们首先要了解Vue中的props和自定义事件是如何在父组件和子组件之间共享数据。
Props和自定义事件
假设我们有一个应用程序，它包含父组件和子组件。和其他的前端框架一样，Vue允许我们使用props将数据从父组件传递到子组件。
使用props非常简单。我们实际上需要做的就是将一个值绑定到正在呈现的子组件的prop属性上。下面是一个使用v-bind指令向下传递一个数组值的示例：
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent :numbers="numbers" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
name: 'ParentComponent',
data: () => ({
numbers: [1, 2, 3]
}),
components: {
ChildComponent
}
}
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<h2>{{ numbers }}</h2>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
numbers: Array
}
}
</script>
ParentComponent组件把numbers数组作为同名的props传递给ChildComponent组件。ChildComponent组件借助Mustache语法将numbers值绑定到其模板上。
最终的效果如下：
props可以用于将数据从父组件传递到子组件！
如果我们需要一个相反方向传递数据的方法（从子组件传到父组件），应该怎么办？比如上面的例，允许我们从子组件的data()函数中引入一个新的number数组。
我们不能再使用props来传递数据了，因为props只能单向传输数据（你从父到子到孙...等等）。为了便于让子组件通知父组件一些事情，我们可以使用Vue自定义事件。
Vue中的自定义事件与JavaScript原生的自定义事件非常相似，但有一个关键性的区别：Vue中的自定义事件主要用于组件之间的通讯，而不是DOM节点之间的通讯！
下面这个示例就是使用自定义事件，把ChildComponent中的number值传递给ParentComponent组件，从而更改ParentComponent的numbers的示例：
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent :numbers="numbers" @number-added="numbers.push($event)" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent';
export default {
name: 'ParentComponent',
data: () => ({
numbers: [1, 2, 3]
}),
components: {
ChildComponent
}
}
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<h2>{{ numbers }}</h2>
<div class="form">
<input v-model="number" type="number" />
<button @click="$emit('number-added', Number(number))"> Add new number</button>
</div>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
numbers: Array
},
data: () => ({
number: 0
})
}
</script>
ChildComponent组件有一个捕获number值的input和捕获number值发出一个number-added自定义事件的按钮。
在ParentComponent组件上指定了由@number-added表示的自定义事件的监听器，其主要用于呈现子组件。当该事件在子组件中发出时，它将number的值推送到ParentComponent组件的numbers数组中。最终的效果如下：
自定义事件用于从子组件到父组件的通讯。
我们可以使用props向下传递数据，使用自定义事件向上发送消息。我们如何能够传递数据和实现两个不同兄弟组件之间的通讯呢？
我们不能像上面那样使用自定义事件，因为这些事件是在特定组件的接口中发出的，因此需要在组件渲染的位置声明自定义事件侦听器。在两个独立的组件中，一个组件不会在另一个组件中渲染。
在Vue中大致有三种方式可以管理兄弟组件之间的数据通讯，从而处理应用程序的状态管理：
- 使用全局的EventBus
- 使用简单的全局存储
- 使用类似于Flux库的Vuex
EventBus
EvemtBus是一个Vue实例，用于支持独立组件之间订阅和发布自定义事件。
等等，我们不是说独立的组件不能触发和监听彼此之间的自定义事件吗？他们通常不能，但是一个EventBus帮助我们实现这个目标，因为它是全局的，可以通用。
下面的示例在event-bus.js创建了一个EventBus的实例：
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
我们现在可以使用EventBus的接口来发出事件（Emit Events）。假设我们有一个NumberSubmit组件，它负责在单击按钮时发送自定义事件。这个自定义事件number-added将传递用户在input中输入的值：
<!-- NumberSubmit.vue -->
<template>
<div class="form">
<input v-model="number" type="number" />
<button @click="addNumber">Add new number</button>
</div>
</template>
<script>
import { EventBus } from '../event-bus.js';
export default {
name: 'NumberSubmit',
data: () => ({
number: 0
}),
methods: {
addNumber(newNumber) {
EventBus.$emit('number-added', Number(this.number))
}
}
}
</script>
现在我们可以有一个完全独立的组件，比如NumberDisplay，它会显示一个数字值的列表，并监听NumberSubmit组件中是否输入了一个新数值：
<!-- NumberDisplay.vue -->
<template>
<div>
<h2>{{ numbers }}</h2>
</div>
</template>
<script>
import { EventBus } from '../event-bus.js';
export default {
name: 'NumberDisplay',
data: () => ({
numbers: [1, 2, 3]
}),
created() {
EventBus.$on('number-added', number => {
this.numbers.push(number)
})
}
}
</script>
我们在NumberDisplay 组件的created()钩子中（它是Vue生命周期中的一个钩子函数）创建了一个EventBus监听器：EventBus.$on。当NumberSubmit组件发送事件时，它将在事件对象中传递一个number值。NumberDisplay侦听并将该新number推送到其numbers数组中。
<!-- App.vue -->
<template>
<div id="app">
<NumberDisplay />
<NumberSubmit />
</div>
</template>
<script>
import NumberDisplay from './components/NumberDisplay';
import NumberSubmit from './components/NumberSubmit';
export default {
name: 'App',
components: {
NumberDisplay,
NumberSubmit
}
}
</script>
最终效果如下：
上面的示例回答了前面提出的问题：EventBus可以用来实现兄弟组件之间的数据通讯！
是不是觉得设置和使用EventBus很容易，对吧？不幸的是，EventBus有一个明显的劣抛。假如我们的应用程序下面这样的：
假设所有的白线箭头都是从父组件向下传递到所有子组件的props，而黄色的虚线箭头则是从组件发出和监听事件。这些事件都没有被跟踪，并且可以在应用程序的任何地方触发。这使得维护工作变得非常困难，这可能会使代码难以工作，并且成为bug的来源。
这是为什么Vue指南声明EventBus不是Vue应用程序数据管理方法的主要原因之一。
EventBus是让所有组件相互通讯的一种简单方法，但并适合中、大型的应用程序。
全局存储
让我们看看另一种处理应用程序数据通讯的方法。
通过创建包含在组件之间共享数据存储的存储模式，可以实现一些简单的状态管理。存储（Store）可以管理应用程序的状态以及负责更改状态的方法。
例如，我们可以有一个像下面这样简单的存储：
// store.js
export const store = {
state: {
numbers: [1, 2, 3]
},
addNumber(newNumber) {
this.state.numbers.push(newNumber)
}
}
在store中的state中包含了一个numbers数组，以及一个addNumbers方法，该方法接受接受有效负载并直接更新state.numbers的值。
我们可以有一个组件NumberDisplay用来显示来自store的numbers数组：
<!-- NumberDisplay.vue -->
<template>
<div>
<h2>{{ storeState.numbers }}</h2>
</div>
</template>
<script>
import { store } from '../store.js';
export default {
name: 'NumberDisplay',
data: () => ({
storeState: store.state
})
}
</script>
我们现在可以创建另一个组件NumberSubmit，它允许用户向我们数据数组中添加一个新的数字：
<!-- NumberSubmit.vue -->
<template>
<div class="form">
<input v-model="numberInput" type="number" />
<button @click="addNumber(numberInput)">Add new number</button>
</div>
</template>
<script>
import { store } from '../store.js';
export default {
name: 'NumberSubmit',
data: () => ({
numberInput: 0
}),
methods: {
addNumber(numberInput) {
store.addNumber(Number(numberInput))
}
}
}
</script>
NumberSubmit组件中有一个addNumber()方法，它调用store.addNumber()变量并传递预期的有效负载。
store方法接收有效负载并直接改变store.numbers数组。由于Vue的响应性（Vue reactivity），当存储状态中的number数组发生更改时，依赖于此值的相关DOM（NumberDisplay组件中的<template>）会自动更新。
当我们说组件相互交互时。这些组件不会对彼此做任何事情，而是通过存储相互调用更改。
然后在App.vue中引入刚才创建的组件：
<!-- App.vue -->
<template>
<div id="app">
<NumberDisplay />
<NumberSubmit />
</div>
</template>
<script>
import NumberDisplay from './components/NumberDisplay';
import NumberSubmit from './components/NumberSubmit';
export default {
name: 'App',
components: {
NumberDisplay,
NumberSubmit
}
}
</script>
最终的效果如下：
如果我们仔细观察所有与存储直接交互的所有部分，我们可以建立一个模式：
NumberSubmit中的方法有责任直接对存储方法进行操作，因此我们可以将其标记为 存储操作（Store action）- 存储方法也有一定的责任 —— 直接改变存储状态。 所以我们会说这是一个 存储变量（Store mutation）
NumberDisplay并不真正关心存储或NumberSubmit中方法类型，只关心存储中获取信息。所以我们会说组件A是各种 Store getter
一个动作（Action）提交给一个变量（Mutation）。变量会改变状态，然后影响视图或组件。视图或组件使用 getter检索存储数据。我们开始很接近类似Flux的状态管理。
允许组件依赖于外部存储，简单存储可以更易于管理应用程序的状态。
Vuex
Vuex是类似Flux的状态管理库，专门用于Vue的状态管理。
对于那些不熟悉的人来说，Flux是Facebook创造的一种设计模式。Flux模式由四个部分组成，组成单向数据管道：
Vuex的灵感主要来自Flux和Elm Architecture。Vuex集成的核心是Vuex存储。
// store.js
const store = new Vuex.Store({
state,
mutations,
actions,
getters
})
Vuex存储（Vuex Store）包含四个对象：state、mutations、actions和getters。
state只是一个包含需要在应用程序中共享的属性的对象。
// store.js
const state = {
numbers: [1, 2, 3]
}
这个state对象只包含了一个numbers数组。
mutations是负责直接改变存储状态的函数。在Vuex中，mutations总是以state作为第一个参数。此外，actions也可以不作为第二个参数传递有效负载：
// store.js
const mutations = {
ADD_NUMBER(state, payload) {
state.numbers.push(payload)
}
}
在Flux架构中，mutations中的函数通常用大写字母表示，以区别于其他函数，并用于工具和lint目的。在上面的示例中，创建了一个ADD_NUMBER()的mutations，它需要一个有效的payload并将该有效的payload推送到state.numbers数组中。
actions可以调用mutations。在提交mutations之前，actions还负责所有异步调用。actions可以访问context对象，该对象提供对state（使用context.state）、getter（使用context.getters）和commit函数（context.commit）的访问。
下面是一个简单的actions的示例，它只是传递预期的有效负载时直接提交mutations：
// store.js
const actions = {
addNumber(context, number) {
context.commit('ADD_NUMBER', number)
}
}
Vuex存储中的getters就像组件中的计算属性一样。getters主要用于执行一些计算和操作，以便在组件访问这些信息之前存储状态。
像mutations一样，getters可以访问state作为第一个参数。这里有一个叫getNumbers的getter，它只返回state.numbers数组：
// store.js
const getters = {
getNumbers(state) {
return state.numbers
}
}
最后store.js的代码如下所示：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
numbers: [1, 2, 3]
};
const mutations = {
ADD_NUMBER(state, payload) {
state.numbers.push(payload);
}
};
const actions = {
addNumber(context, number) {
context.commit("ADD_NUMBER", number);
}
};
const getters = {
getNumbers(state) {
return state.numbers;
}
};
export default new Vuex.Store({
state,
mutations,
actions,
getters
});
对于这样简单的一个示例，可能不一定需要Vuex存储。上面的示例只是用来向大家展示如何使用Vuex和简单的全局存储在实现上的直接区别。
当Vuex存储准备好之后，Vue应用程序可以在Vue实例中声明store对象，可以提供给Vue应用程序使用。
// main.js
import Vue from "vue";
import App from "./App";
import store from "./store";
new Vue({
el: '#app',
store,
components: {
App
},
template: '<App />'
})
有了Vuex存储之后，组件通常可以执行以下两种操作之一。他们要么：获取（GET）状态信息（通过访问store中state或getters）或者 调用（DISPATCH）actions。
下面创建的NumberDisplay组件，它通过将getNumbers存储getter映射到组件getNumbers计算属性来直接显示state.numbers数组。
<!-- NumberDisplay.vue -->
<template>
<div>
<h2>{{ getNumbers }}</h2>
</div>
</template>
<script>
export default {
name: 'NumberDisplay',
computed: {
getNumbers() {
return this.$store.getters.getNumbers
}
}
}
</script>
接着再创建一个NumberSubmit组件，允许用户通过addNumber方法映射到同名的actions，然后将新输入的数字添加到state.numbers：
<!-- NumberSubmit.vue -->
<template>
<div class="form">
<input v-model="numberInput" type="number" />
<button @click="addNumber(numberInput)">Add new number</button>
</div>
</template>
<script>
export default {
name: 'NumberSubmit',
data: () => ({
numberInput: 0
}),
methods: {
addNumber(numberInput) {
this.$store.dispatch('addNumber', Number(numberInput))
}
}
}
</script>
最后在App.vue中引入前面创建的组件：
<!-- App.vue -->
<template>
<div id="app">
<NumberDisplay/>
<NumberSubmit/>
</div>
</template>
<script>
import NumberDisplay from "./components/NumberDisplay";
import NumberSubmit from "./components/NumberSubmit";
export default {
name: "App",
components: {
NumberDisplay,
NumberSubmit
}
};
</script>
最终的效果如下：
我们可以看到，Vuex通过引入显式定义的actions、mutations和getters扩展了简单的存储方法。这就是使用Vuex的最初标准和主要优势所在。此外，Vuex和vue-devtools集成在一起，提供了更易的调试功能。
下图就是一个关于vue-devtools如何帮助我们在发生突变时观察存储信息：
Vuex不是唯一个用来管理Vue状态的库，类似于Flux的库在社区中还有很多种，比如redux-vue或vuejs-redux，用于扩展Redux。然而，由于Vuex是专门为Vue应用程序而定制的，因此它无疑是最容易与Vue应用程序集成在一起。
Vuex扩展了简单的存储方法，使我们的应用程序的状态管理变得更简单。
如何选择最合适的方法
很多时候，你会发现大家试图了解最佳方法是什么？我不一定相信有正确或错误的方法，因为每种方法都有其优点和缺点。
EventBus
- 优点： 非常容易设置
- 缺点： 无法正确跟踪发生的变化
简单的存储
- 优点： 相对容易建立
- 缺点： 状态和可能的状态变化没有明确定义
Vuex
- 优点： 管理应用程序最强大的方法，并且与Vue开发工具集成在一起
- 缺点：额外的文件，需要花时间学习
不管哪一种方法，都没有最好的方法，只有最适合的方法。我们应该根据自己的项目选择最适合项目的最佳方法。最后希望这篇文章对于想学习Vue的状态管理的同学有所帮助。