Vuex

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

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

    • view,以声明方式将 state 映射到视图;
    • actions,响应在 view 上的用户输入导致的状态变化。
      以下是一个表示“单向数据流”理念的极简示意:

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

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

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

    Vuex 核心思想

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

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

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