vuex 基本入门和使用（一）

vuex 版本为 ^2.3.1，按照我本身的理解来整理vuex。

vuex 是什么

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

• 什么是状态？

  • 状态这里泛指 vue 组件的一些当前的情况和性质，例如当前 a 组件是获取到了10条数据，这是一个状态，b 组件滚动到某个位置，这也是一个状态。

• 状态管理是什么：

  • 状态管理是对以前说的状态进行管理，例如 a 组件这个状态须要通知 b 组件，或者 b 组件的当前状态须要触发 b 的父组件的某个属性。

  • 具体有如下三个内容：

    • state，驱动应用的数据源；
    • view，以声明方式将 state 映射到视图；
    • actions，响应在 view 上的用户输入致使的状态变化

状态管理的三个内容是怎么使用的呢？就须要先知道 vue 是单向数据流的方式驱动的，而后三个内容的使用实际上是下面这个循环图，state 会显示到 view，用户会根据 view 上的内容进行操做，触发 actions 而后再去影响 state（这里先无论三个东西是哪一个先起头的）

正常状况下很好理解和使用，由于都是单向的，非黑即白，可是面对复杂的业务环境之下，单向流方式会很容易遭到破坏：

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

  • 解决的话须要使用传参方式，但对于多层嵌套的组件将会很是繁琐，而且对于兄弟组件间的状态传递无能为力。

• 来自不一样视图的行为须要变动同一状态。

  • 解决的话采用父子组件直接引用或者经过事件来变动和同步状态的多份拷贝。

以上的这些模式很是脆弱，主要是由于多个组件之间的关系会变得很复杂，一般会致使没法维护的代码。

有见及此，vuex 借鉴了 Flux、Redux、和 The Elm Architecture的设计思想，将状态管理单独抽离出来，造成了如今的 vuex。官方也画出了一个图来讲明 vuex 在哪里起做用的，参看下图：

这个图是须要解释一下的：

• vuex 的区域是绿色虚线框的位置

• 流程：

  • 每次 vue 组件须要 给 vuex 分派 一个 actions，actions 提交一个 mutation，由 mutation 来修改 state，而后再返回给 vue 组件渲染。
  • state 状态只能由 mutation 来修改。
  • actions 会能够封装各类 mutation 来进行修改 state。
• 关于 state：state 就是状态
• 关于 mutation：mutation 是 vuex 对 state 或者 store 提交修改的惟一方式，不用管太多特别的含义。

• 关于 getter：

  • 这里没有出现 getter， 由于 getter 在这个流程里面不须要出现，他只是一个属性，方便从 vuex 的内存里面获取一些信息。

• 关于 actions：

  • Action 提交的是 mutation，而不是直接变动状态。
  • Action 能够包含任意异步操做。

笔者本身的理解就是Action 至关于一把手枪，mutation 至关于里面的子弹，靶心就是 state， 得分指示牌就是 getter 。

什么状况下我应该使用 Vuex？

虽然 Vuex 能够帮助咱们管理共享状态，但也附带了更多的概念和框架。这须要对短时间和长期效益进行权衡。

• 若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。
• 若是是简单应用一个简单的 global event bus （即作一个全局的变量或者全局对象）就足够您所需了。
• 可是，若是您须要构建是一个中大型单页应用，您极可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为天然而然的选择。

基础样例

• 每个 Vuex 应用的核心就是 store（仓库）。
• 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地获得高效更新。
• 你不能直接改变 store 中的状态。改变 store 中的状态的惟一途径就是显式地提交 (commit) mutation。

总的来讲就是 vuex 的状态是存储在 store 里面的，要修改状态就只能进行 mutation 的提交 commit，一旦进行提交成功，状态被改变后，相关使用该状态的组件也会更新状态信息。

// 若是在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: { 
    count: 0
  },
  mutations: { 
      // 只能经过 mutation 来进行状态变动
    increment (state) {
      state.count++
    }
  }
})

须要使用 es2015语法编写 javascript

// 经过vuex 的 mutation 进行 commit
store.commit('increment')

// 经过store.state来获取状态对象
console.log(store.state.count) // -> 1

在jsrun上的样例地址：http://jsrun.net/i2qKp

参考：

• Introduction · Vuex