1问：vuex是什么？

答案：不用我多说了吧，如果你还不清楚，请查阅vuex官方文档。

2问：那我们会在什么时候用vuex呢 ?

答案：简单一点，就是数据需要共享时，再简单一点呢，就是一个数据，好多个组件都要用到的时候，我们就可以使用vuex来帮我们做状态管理了。

3问：有什么好处？

答案：很明显，一个数据只需要写在一个文件里面，然后其他组件都通过相应的api拿到这个数据，我们再也不用一个个重复编码，好处自然是显而易见的咯。

这里是一条华丽丽的分割线，你懂得~

如何使用呢？

首先，我们先来看看，在一个项目中，vuex的结构吧，如下：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

如果你想直接使用，直接复制下面的代码吧，当然，这样有点难得慢慢找。

state:    this.$store.state.xxx;    &&   this.$store.state.模块名.xxx; 
getters:  this.$store.getters.xxx   &&   this.$store.getters.模块名.xxx;

mutations:  this.$store.commit('mutation名', 参数) && this.$store.commit('模块名/mutation名', 参数);
actions:    this.$store.dispatch('action名', 参数) && this.$store.dispatch('模块名/action名', 参数);

如果你觉得上面那样很麻烦，我们还可以借助vuex提供的辅助函数来拿取数据。

import { mapState，mapGetters, mapMutations, mapActions } from 'vuex';

让我们通过下面这张图来看看它的基本使用吧。

看了上面这张图是不是感觉清晰很多了呢？

好了，今天就到这里了，明天依旧光芒万丈，你值得世间一切美好。