转载地址

https://www.jianshu.com/p/120eaf50331c

揭开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，有以下两个要求：

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

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