① vuex：弄懂mapState、mapGetters、mapMutations、mapActions
在引入vuex后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态。注册两个组件分别引入到app.vue中。
在vue组件中，vhome组件和vabout组件内容显示了相应的功能。有了vuex，我们不必在考虑组件之间的传值，直接就可以通过$store来获取不同的数据，但是当需要vuex中的多个数据时，这种方法就显得有些啰嗦。这时，我们可以将多个数据定义在computed中，这样引入的时候就方便了很多。
为了进一步简化代码，引入了mapState辅助函数。使用mapState方法，可以将多个数据的引入代码简化为一句，相当于下面这些代码。记住：用mapState等这种辅助函数的时候，前面的方法名和获取的属性名是一致的。
如果需要自定义计算属性，可以使用es6中的展开运算符。比如，如果我们需要计算一些自定义属性，可以使用这样的方式来引入。
在处理数据时，可以使用getters，相当于vue中的计算属性，通过getters进一步处理，得到我们想要的值，并且允许传参，第一个参数就是state。这样可以使代码更加简洁和灵活。
在代码中定义的需要修改数据的操作，我们使用mutations。它类似于vue中的methods，需要通过commit来调用其里面的方法，并且可以传入参数，第一个参数是state，第二个参数是载荷（payLoad），也就是额外的参数。代码如下，模板部分和js部分的引入展示了mutations的使用。
为了简化代码，引入了mapMutations，通过它将方法映射过来，这样就可以避免在代码中频繁地写出多个mutations方法，使得代码更加整洁。但是，为什么要绕一圈，从mutations里面去改state呢？实际上，mutations不仅可以做赋值操作，还可以进行类似埋点的操作，如果从mutations中操作，可以被检测到，可以更方便地使用调试工具调试，调试工具可以检测到实时变化，而直接改变state中的属性，则无法实时监测。
为了避免字符串写错导致的问题，推荐使用常量替代Mutation事件类型。代码如下，将方法名字定义为一个常量，这样写的好处是不容易写错，且当写错时，eslint可以提示错误位置。同时，可以新建一个文件（mutation_type.js）专门存储这些常量，然后在store/index.js中引入。
在实际开发中，通常需要在actions中处理异步操作，如请求数据。actions类似于mutation，但区别在于action可以提交mutation，并且action包含异步操作，比如axios请求，可以将这些操作都放在action中。在actions中定义的方法默认就是异步的，并且返回promise。在vue部分，可以使用mapActions(['getUserInfo'])来替代直接引入多个方法，这样更加简洁。
在获取用户信息的场景中，通常在页面加载后，通过调用actions中的getUserInfo方法来获取用户信息。当登录后，需要得到用户信息，这时，首先想到的就是通过actions来操作mutations从而操作state。在actions中定义getUserInfo方法，然后在vue部分调用此方法，通过commit调用setUserInfo，将用户信息作为参数传入，将相对应的属性值赋值给state，完成这一过程的操作。在实际操作中，可以使用解构的方式，让代码更加清晰和便捷。