挑战全网最幽默的Vuex系列教程：第一讲 Vuex究竟是什么鬼

先说两句

官方已经有教程了，为何还要写这个教程呢？说实话，还真不是我闲着蛋疼，官方的教程真的是太官方了，对于刚入门 Vuex 的童鞋来讲，想必看官方的教程，不少地方就如同看圣经同样，好比「欧玛尼玛尼牙」，全部的字都认识，就是不知道说些什么玩意，不信，你能够戳进去看看。

固然，对于大神级别一看就懂的，那就不用说了，确定是看官方的更权威。还有，若是对 Flux、Redux、The Elm Architecture 比较熟悉的话，也能够移步官方，由于官方也说了，Vuex 的套路基本上都是从那边吸收整合后，过渡而来的，只不过，Vuex 只钟情于 Vue.js 罢了。

我之因此写这个教程，主要是由于本身刚刚开始和 Vuex 打交道的时候，痛过了、苦过了、伤过了，因此痛定思痛，为了能让本身更好的驾驭 Vuex，也为了避免让新来的童鞋们被 Vuex 调戏事后无处诉苦，因此方才决定把官方的这些抽象的文字和概念，用连你身后的鼓励师小姐姐都能看懂的语言，分享出来，助你在前端的道路上越走越顺，顺利的找到一份有鼓励师陪伴的工做。

再说一句

Vuex 是 Vue.js 的座驾，因此，若是还不懂Vue.js 的话，那仍是先把 Vue.js 勾搭上了再带过来一块儿坐坐吧。固然，既然可以溜达到这里，想必跟 Vue.js 起码也已是朋友了吧。

有点啰嗦，不要嫌弃，写教程也须要有点前戏，毕竟是第一次。

安装

关于 Vuex 的具体安装，就不在这里说了，这个官方仍是比较清晰的，戳此进入。可是须要注意两点：

• 在一个模块化的打包系统中，您必须显式地经过 Vue.use() 来安装 Vuex，好比：

  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)  // 必须调用此函数来注入 Vuex
  复制代码

• 当使用全局 script 标签引用 Vuex 时，就不用那么麻烦了，直接引用进来就好，但要注意引用的前后顺序，以下：

  // 在 Vue 以后引入 vuex 会进行自动安装
  <script src="/path/to/vue.js"></script>
  <script src="/path/to/vuex.js"></script>
  复制代码

虽然 script 的方式看起来比较自动化，可是接触得多了，你就会明白模块化其实才是咱们的最佳姿式。

揭开 Vuex 的神秘面纱

拿到一个工具，咱们第一时间须要弄明白的，就是这个工具到底可以帮助咱们解决什么问题。好比锤子，砸得了鸡蛋打得了电话，好比苹果，不但能吃还能玩。那么 Vuex 呢，若是把 Vue.js 比喻成路人（走路的人）的话，那么 Vuex 就是他的桑塔纳，若是他想去隔壁买包烟，那走过去就好了，开个车过去反而是一种负担，可是若是他想去几十千米的学校采花，那桑塔纳就得派上用场了，否则等他走过去，可能花儿都谢了。

固然，类比只是为了告诉咱们 Vuex 的价值所在，那么在具体在实际的应用中，它能干什么？何时才须要翻它的牌呢？

咱们先来看一段官方代码：

new Vue({
  // state  数据源
  data () {
    return {
      count: 0
    }
  },
  // view  视图
  template: `
    <div>{{ count }}</div>
  `,
  // actions  事件
  methods: {
    increment () {
      this.count++
    }
  }
})
复制代码

这是一个很简单的增加型计数功能页面，和 Vue.js 有一腿的，应该秒懂。经过事件 increment，实现 count 增加，而后渲染到界面上去。

这种方式其实就跟走路买烟同样，属于短途效应，官方称做为「单向数据流」，很好理解。

可是，状况变了，如今有两个页面 A 和 B，还有如下两个要求：

• 要求它们都能对 count 进行操控。
• 要求 A 修改了 count 后，B 要第一时间知道，B 修改后，A 也要第一时间知道。

怎么办？稍微有点开发经验的，就可以很容易的想到，把数据源 count 剥离开来，用一个全局变量或者全局单例的模式进行管理，这样不就在任何页面均可以很容易的取到这个状态了。

是啊，这尼玛就是 Vuex 背后的思想啊，它干的就是这个事情。是否是有一种被 Vuex 这个高大上的名号所坑害的感受，不就是全局模型吗，不用它也一样可能搞定嘛。

是的，也能够搞定，就像没有桑塔纳，你也能够去学校看花同样，只是经历的过程不同了。

Vuex 的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则，好比修改数据源 state、触发 actions 等等，都须要遵循它的规则，以此来达到让项目结构更加清晰且易于维护的目的。

那么咱们再来看看官方的描述：

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

有没有瞬间清晰多了。

何时翻 Vuex 的牌

其实了解了 Vuex 要干的活之后，何时翻牌，那就容易选择得多了。就像前面的类比同样，去隔壁买包烟，你还开个桑塔纳，找停车位的时间，烟都抽完了。

因此，咱们要根据项目的须要，来衡量短时间和长期的效益，若是不打算开发大型的单页应用，那 Vuex 可能仍是你的一个负担。对于一些不大不小的项目，本身又懒得走，开车又以为麻烦，那你骑个共享单车过去也行嘛。

这里的共享单车指代的是官方中的一个简单的 store 模式，其实就是一个单纯的全局对象。

关于全局对象和 Vuex 之间的区别，官方写得仍是比较通俗易懂的：

Vuex 和单纯的全局对象有如下两点不一样：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地获得高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中状态的惟一途径就是显式地提交 (commit) mutation。这样使得咱们能够方便地跟踪每个状态的变化，从而让咱们可以实现一些工具帮助咱们更好地了解咱们的应用。

简单示例

// 若是在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
复制代码

每个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

注意：若是 mutations 不知道是什么，不要紧，后面会专门讲解到，能够单纯的理解为只能用它里面的方法来修改 state 中的数据。

store.commit('increment') // 调用 mutations 中的方法
console.log(store.state.count) // -> 1
复制代码

为何要这样设计的，官方也给出了具体的缘由：

咱们经过提交 mutation 的方式，而非直接改变 store.state.count，是由于咱们想要更明确地追踪到状态的变化。这个简单的约定可以让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让咱们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，咱们甚至能够实现如时间穿梭般的调试体验。

因为 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅须要在计算属性中返回便可。触发变化也仅仅是在组件的 methods 中提交 mutation。

若是最后一句话没看懂，不要紧，下一章立刻就会讲到。

PS

来点正经的，到这里，第一篇其实就已经写完了，固然，这里的内容都是我看了官方的教程后，本身的一个理解，若是有理解不到位的地方，欢迎拍砖。

转载声明：

做者：大宏说

原文连接: www.jianshu.com/p/120eaf503…

后记

以上就是胡哥今天给你们分享的内容，喜欢的小伙伴记得点赞、收藏呀，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！现任京东前端攻城狮一枚。 胡哥有话说，专一于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！