Vuex的简介

官方解释Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

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

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

const Counter = {
  // 状态
  data () {
    return {
      count: 0
    }
  },
  // 视图
  template: `
    <div>{{ count }}</div>
  `,
  // 操作
  methods: {
    increment () {
      this.count++
    }
  }
}

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

关键字：

• 状态管理模式：vuex 的作用是拿来管理应用状态

• 集中式存储：状态可以在组件间共享

• 相应的规则：vuex 的状态树是一个单向数据流

单向数据流是什么？

单向数据流概念图：

• 状态，驱动应用的数据源；

• 视图，状态映射到视图；

• 操作，响应在视图上的用户输入导致的状态变化。

vuex 的运作原理图：

• vue components：页面组件

• actions：操作，vuex 提供的由页面触发的操作，actions 可以是异步的，往往在这里可以向服务器发起请求，获取数据

• mutations：修改状态的函数，在严格模式下，状态只能由 mutations 修改，且 mutations 必须是同步函数

• state: 应用程序共享的状态，状态变化将触发页面更新

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

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

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

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

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

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

如果你想交互式地学习 Vuex，可以看这个 Scrimba 上的 Vuex 课程，它将录屏和代码试验场混合在了一起，你可以随时暂停并尝试。

vuex 的应用场景

应用程序中用于共享数据给所有组件，并将数据进行一个集中化管理。