Vuex 是什么？

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么是“状态管理模式”？

让咱们从一个简单的 Vue 计数应用开始：

new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.count++ } } }) 

这个状态自管理应用包含如下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入致使的状态变化。

如下是一个表示“单向数据流”理念的极简示意：

可是，当咱们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不一样视图的行为须要变动同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会很是繁琐，而且对于兄弟组件间的状态传递无能为力。对于问题二，咱们常常会采用父子组件直接引用或者经过事件来变动和同步状态的多份拷贝。以上的这些模式很是脆弱，一般会致使没法维护的代码。

所以，咱们为何不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，咱们的组件树构成了一个巨大的“视图”，无论在树的哪一个位置，任何组件都能获取状态或者触发行为！

另外，经过定义和隔离状态管理中的各类概念并强制遵照必定的规则，咱们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture。与其余模式不一样的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

什么状况下我应该使用 Vuex？

虽然 Vuex 能够帮助咱们管理共享状态，但也附带了更多的概念和框架。这须要对短时间和长期效益进行权衡。

若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。确实是如此——若是您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。可是，若是您须要构建是一个中大型单页应用，您极可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为天然而然的选择。引用 Redux 的做者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道何时须要它。