Vue源码解析之Vuex介绍

Vuex是什么？

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

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

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

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

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

• state，驱动应用的数据源

• view，以声明方式将state映射到视图

• actions，响应在view上的用户输入导致的状态变化

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

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

• 多个视图依赖同一个状态。

• 来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多分拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码

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

Vuex核心思想

Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态（state）。有些同学可能会问，那我定义一个全局对象，再去上层封装了一些数据额存取的接口不也可以么？

Vuex和单纯的全局对象有以下两点不同：

• Vuex的状态存储是响应的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。

• 你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交（commit）mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

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