什么是 Vuex？ #

Vuex 是 Vue.js 应用程序的 **状态管理模式 + 库**。它充当应用程序中所有组件的集中存储，并通过规则确保状态只能以可预测的方式进行变异。

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

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

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

createApp(Counter).mount('#app')

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

• **状态**，驱动我们应用程序的真相来源；
• **视图**，**状态**的声明性映射；
• **操作**，状态可能在响应来自 **视图** 的用户输入而发生变化的可能方式。

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

但是，当我们有 **多个组件共享一个共同状态** 时，简单性很快就会失效

• 多个视图可能依赖于同一部分状态。
• 来自不同视图的操作可能需要变异同一部分状态。

对于第一个问题，传递道具对于深层嵌套的组件来说可能很繁琐，并且对于兄弟组件来说根本不起作用。对于第二个问题，我们经常发现自己求助于诸如获取直接父/子实例引用或尝试通过事件变异和同步多个状态副本之类的解决方案。这两种模式都很脆弱，并且很快就会导致难以维护的代码。

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

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

这是 Vuex 背后的基本思想，灵感来自 Flux、Redux 和 The Elm Architecture。与其他模式不同，Vuex 也是专门为 Vue.js 量身定制的库实现，以利用其细粒度的反应系统来实现高效的更新。

如果您想以交互方式学习 Vuex，可以查看这个 Scrimba 上的 Vuex 课程，它为您提供了屏幕截图和代码游乐场的混合，您可以随时暂停和玩耍。

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

Vuex 帮助我们处理共享状态管理，但代价是需要更多概念和样板代码。这是短期和长期生产力之间的权衡。

如果您从未构建过大型 SPA 并直接跳入 Vuex，它可能会让人感觉冗长且令人生畏。这很正常 - 如果您的应用程序很简单，您很可能不需要 Vuex。一个简单的 存储模式 可能就是您所需要的。但是，如果您正在构建一个中大型 SPA，您很有可能遇到过让您思考如何更好地处理 Vue 组件之外的状态的情况，而 Vuex 将是您的自然下一步。Redux 作者 Dan Abramov 有句名言

Flux 库就像眼镜：您会知道什么时候需要它们。