Vuex的5大核心概念：state、mutations、actions、getters、module

（一）为什么要使用vuex？它有什么用？

背景：由于vue中遵循单向数据流，以及“谁的数据(data)谁负责”原则，组件之间要获取/修改别人的数据，只能通过子传父、父传子等多个组件传导方式，复杂业务场景下比较麻烦。

解决：而vuex就很好的解决了这个问题，它提供了一个数据仓库store，把公用的数据都存放在里面了，比如个人信息。到时候哪个组件想要用，直接去拿就行，不用再经过多组件之间互相传导。

作用：vuex 本质就是一个状态（这里的状态就是指数据）管理工具，多组件共同使用的数据由它来维护，且响应式变化实时更新，例如组件a修改了仓库里面的数据，组件b组件c引用渲染的仓库数据就会跟着一起变化。此外，vuex 还提供了一些辅助函数（mapState、mapMutations、mapActions、mapGetters），可以少写一部分原生代码，操作简洁。

（二）vuex的5大核心概念有什么区别？

1）state：用于仓库数据的渲染，原生态渲染。

获取仓库(sotre)数据后，直接渲染到组件页面上。

2）getters：用于仓库数据的渲染，数据调整后渲染。

有时候需要从state中派生出一些状态，因此获取仓库数据后，会进行一些filter/toUpperCase等计算属性操作，再渲染到组件页面上。

3）mutations：用于仓库数据的修改，同步方法。

组件页面上的数据不能直接修改，要通过mutations操作来修改state，state修改后组件响应式更新，页面上就呈现最新的数据了。

注意！！state数据的修改只能通过mutations，mutations必须是同步的，为了便于监测数据变化，记录调试。

4）actions：用于仓库数据的修改，异步方法。

actions 通常用于异步方法的调用，

例如3秒后修改仓库里面的数据，涉及到了异步操作setTimeout；

还有axios请求获取数据，把获取到的数据更新到仓库store里面，也涉及到了异步请求。

注意！！actions 只是用来处理异步操作的，它不能直接操作修改state。

等异步操作获取到数据后，还是要通过commit mutation才能修改仓库store的数据。

5）modules：将仓库数据的属性分类，按模块划分，每个模块都包含state/getters/mutations/actions这四部分，便于维护。

由于vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象state。

在中大型项目中，state里面的公共属性比较多，整体就比较臃肿，不便于管理。

于是可以将这些属性按类划分，比如购物车模块，个人信息模块等等，每个模块都有自己的state、getters、mutations、actions，这样模块彼此之间保持独立，可维护性就高很多了。

注意！！模块导出的时候，要开通命名空间（namespaced：true），这样方便后续使用。