What is Vuex?

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行变更。它还与Vue的官方devtools扩展集成，以提供零配置时间旅行调试和状态快照导出/导入等高级功能。

＃什么是“国家管理模式”？

让我们从一个简单的Vue计数器应用程序开始：

newVue({// statedata(){return{count:0}},// viewtemplate:`

    <div>{{ count }}</div>

  `,// actionsmethods:{increment(){this.count++}}})

它是一个独立的应用程序，包含以下部分：

的状态，真理，推动我们的应用程序的来源;

的视图，所述的声明性映射状态 ;

的动作，可能的方式的状态可从用户输入反应改变视图。

这是“单向数据流”概念的简单表示：

但是，当我们有多个共享共同状态的组件时，简单性很快就会崩溃：

多个视图可能取决于同一个状态。

不同观点的行动可能需要改变同一个州。

对于第一个问题，传递道具对于深层嵌套组件来说可能很乏味，而且对于兄弟组件来说根本不起作用。对于问题二，我们经常发现自己使用解决方案，例如到达直接父/子实例引用或尝试通过事件变异和同步状态的多个副本。这两种模式都很脆弱，很快导致无法维护的代码。

那么为什么我们不从组件中提取共享状态，并在全局单例中进行管理呢？有了这个，我们的组件树变成了一个大的“视图”，任何组件都可以访问状态或触发操作，无论它们在树中的哪个位置！

通过定义和分离状态管理中涉及的概念并实施维护视图和状态之间独立性的规则，我们为代码提供了更多的结构和可维护性。

这是Vuex背后的基本理念，受到Flux，Redux和The Elm Architecture的启发。与其他模式不同，Vuex也是专为Vue.js量身定制的库实现，以利用其粒度反应系统进行有效更新。

如果您想以交互方式学习Vuex，可以在Scrimba上查看这个Vuex课程，它可以为您提供屏幕播放和代码游乐场，您可以随时暂停和玩游戏。

＃我什么时候应该使用它？

Vuex帮助我们处理共享状态管理以及更多概念和样板的成本。这是短期和长期生产力之间的权衡。

如果您从未建造过大型SPA并直接进入Vuex，它可能会感到冗长和令人生畏。这是完全正常的 - 如果你的应用很简单，没有Vuex你很可能会很好。您可能只需要一个简单的商店模式。但是，如果您正在构建一个中到大规模的SPA，那么您可能会遇到一些情况，这些情况会让您考虑如何更好地处理Vue组件之外的状态，而Vuex将是​​您自然而然的下一步。Redux的作者丹·阿布拉莫夫（Dan Abramov）引用了一句很好的话：