vuex轻松入门

今天我们就进入vuex的学习。咱们还是从数据流动说起。

最容易管理的单向数据流动，其实就是父组件向子组件传递，我们可以用prop作桥梁；而子向父传递呢，我们也勉强可以用$on和$emit的方式搞定；然鹅，到了兄弟之间的通信，事情就变得复杂起来，event bus的方式变得难以维护，除此之外还有更糟糕的——比如父亲向孙子传递，祖父与叔叔的传递，二大爷和他爷爷的。。。。

也就是说，嵌套较深的组件之间的数据流动，靠着event bus根本搞不定。出个小问题挨个排查祖宗十八代？这不有毛病么？因此，我们希望找到更好的解决方案。

大家先撇开vuex，丢掉一切与它相关的概念。我们开动脑筋，利用自己的智慧想一下，是否有更好的思路？

下面我带大家来寻找一下。就像玩一个寻宝游戏，很轻松的。

数据划分

根据用途，我们将组件的数据划分为三类：

1.自己用的数据。

这个很好理解，就是单组件自己用的数据，不参与任何数据流动。

2.向子组件传递的数据。

我们前面学过，父向子传递数据，这是一种单向数据流动，用prop做为桥梁。

3.可能流向任何地方的数据。

那么这种数据，我们命名为state，state就是状态的意思。

state类型的数据比较特殊，因为它可能流向任何地方。比如从父亲流向孙子啊，兄弟之间的流动等等，这个不受任何限制。

前两种情况不需我们操心，只有这第三种情况最头痛。来无影去无踪的，让我咋管理呢？

按照正常做法，可以把state这类不好管理的数据，单独抽离出来，放在一个统一的地方管理。那么用个什么东西来盛装这些state数据呢？

全局对象可否？

大家可以想象一下生活中的仓库。

仓库除了堆放物资，还应该有个管仓库的人员把守。

当往仓库存东西的时候，看守员需要做一下存入登记；当要往外拉东西的时候，同样要出仓登记。

也就是说，一进一出，都需要相应的操作管理，否则仓库随意丢放，这就乱套了。

全局对象相当于这样一个仓库，可以将state入库存放。但是存和取，都应该有对应的操作，这样便有案可循。

其实你走到这一步，vuex的雏形就出来了。

仓库便是store，用来存放state数据。而对应的操作，便是动作action。

action分两种情况，一种是同步的（mutations），一种是异步的（actions）。

这样，vuex的几个基本概念我们就弄清楚了。那么具体如何做呢？

1.划分出组件中的state。

这个要注意，划出来的意思就是不归data管辖了。所以data里面不能声明state类型的数据了。

2.将state状态数据，统一拎入全局store仓库中做管理。

既然是全局了，那就是每个组件都应该引入的。

我们可以在main.js这个统一入口声明store仓库，然后将其插入每个组件中。

3.在store中声明相关操作。

这里我们只做存操作，也就是修改state，取的话比较简单，就是读取state，我们直接在代码体现。

修改state分两种，同步修改和异步修改。同步修改是mutations，异步修改是actions。

4.实际触发修改state的动作。

经过前面3步，我们将一个仓库系统就构建完成了，下面就是实际往仓库存东西了，也就是触发修改state的动作。

我们提供了统一方法commit和dispatch来做这件事。

commit对应的就是触发同步动作，dispatch对应的是触发异步动作。

更多有关vuex的内容，请参考我的微信公众号：“前端js动力节点”