Vue——Vuex了解

一.理解vuex

1.vuex是什么

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

我们以前要实现各个组件间通信，是不是全局事件总线，我们以前都是拿来读这个数据然后对他进行操作，其实没有考虑到写去改这个数据，如果要改A里面的数据，那么A就要绑定一个自定义事件，接受别个组件发回来的数据，然后在A里面修改。

vuex来实现，他不属于任何一个组件，就连app都不是，它是插件所以是注册在入口文件的，vuex是实现任意间数据通信的，他还有一个特点，它是共享数据的，也就是你能直接用你能直接改，那我看到的也是你改之后的结果，最主要他没有那么复杂了，都是单线联系，双向绑定

3.vuex工作原理图

vuex是由三个重要部分组成，actions、mutations、state。我们说要把数据交给vuex进行管理其实就是交给state对象进行存储，它是一个对象，这三个部分其实都是对象，当我们把我们要管理的数据放到state里面后，就把视线看到vc实例这里，我们把数据交给vuex了，但是这个时候我们的vc要开始事件了，这个时候没有数据因为你把数据给到vuex了，想要拿到数据就得遵守它的规则。

先在组件处调用api（dispatch）两个参数，一个是你的函数名和你要传进去的值，这个时候就把函数和值给到actons来了，这里面同样要配置，在actions里面的函数又有两个参数，第一个参数context，迷你版store，发起commit请求，提交到mutations，他的参数state和value，你要对值做什么操作，就可以在这里加工了，然后state里面你保存的值就发生变化了，随后就会重新解析模板，你的值就到页面了。

我们的actions，可能你会觉得有点多余，因为就是一个提交的功能，可以看到它上面有一个api，这是api服务器的意思，如果当我们传进来的值不确定需要ajax拿服务器过来的值，这个时候就要用到actions了，只能在这里发起请求。当然如果你实在没有ajax请求，也没有一些业务逻辑，其实可以省略这一步的，后面也会说。

然后就是devtools，这是vuex的开发者工具。

其实还有一个store的api，他负责管理这三个部分，包括我们的dispatch、commit等api都是他的，所以所有的前提都是要先配置好store