【Vue】 vuex 简介（vuex 与全局总线对比）

要点：

理解 Vuex

Vuex 是什么

1. 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
2. Vuex Github地址

状态即数据, 我们之前做过的案例 todolist 里面的 todos 和 github 案例的 users 都是数据也是状态。

在这边我们实现使用全局事件总线实现, 数据的读, 也就是 a 组件的信息大家都要用, 都进行读取

a 组件为发送方, 其他组件为接收方

也就是在 a 中进行对事件的触发带参（emit）：this.$bus.$emit('事件名', 数据)

而在其他要读取 a 组件里面值的组件里要写对事件的定义, this.$bus.$on('事件名', 回调)

而这边完成了对数据的写操作, 也就是 a 组件中的值要被进行修改

其实就是与前面读操作相反 即 a 组件为接受方（接受其他组件的数据对 a 组件的数据进行修改操作）而其他组件为发送方，发送数据

也就是说要在 a 组件中绑定事件, 即 this.$bus.$on(''事件名". 回调)

在其他组件中进行触发事件, 即 this.$bus.$emit('事件名', 数据)

从图中我们也不难发现, 这里的 x 实现了对其他组件的读写操作, 相当于 x 为多组件的共享数据, 而我们这边用数据总线来进行一个共享数据的实现, 其实是有点麻烦有点乱的, 这边组件还不多, 但是如果有 10 多个组件要实现共享数据, 那么就太麻烦了,

然后我们用 vuex 来实现

首先 vuex 不属于任何一个组件, 当你觉得一个数据需要被多个组件使用时, 就把这个数据放入 vuex 里作为共享数据, 而且这边是双向箭头, 也就是说, 可以完成数据的读写, 拿 a 组件举例, 只要 a 组件里调用 api 就能实现 vuex 里面数据的改变, 而且也能读取 vuex 里面的数据有共享的概念