vuex的辅助函数

vuex中的每个核心模块都有一个辅助函数，主要是用来映射他们的变量。

一，mapState

理解：

例如state中的数据过多，需要一直重复使用this.$store.state.xxx来访问属性，代码并不简洁友好。而mapState就是用来映射state中的属性，自动加到计算属性中，可以用来替代传统的调用方式。

使用方式：

（1）导入： import { mapState } from 'vuex';

（2）在计算属性中引用state的变量：（分为数组方式和对象别名模式）

 export default {

        computed:{

                // 引用state中的变量

                 ...mapState(['name', 'age']); // 数组形式

                ...mapState({ xName: 'name',  xAge: 'age' }); // 对象别名模式

        }

  }

（3）页面中调用属性，可以直接使用this来调用(this.name、this.age）

二，mapGetters

理解：与mapState意义相同，他是getters的映射模式，用来替代传统的调用方式this.$store.getters.xxx

使用方式：

同mapState类似。

三，mapMutations

理解：与mapState意义相同，用来替代this.$store.commit(xx)

使用方式：

同mapState类似。使用this直接调用方法名（eg: this.myMutation()）

四，mapActions

理解：与mapState意义相同，用来替代this.$store.dispatch(xx)

使用方式：

同mapState类似。使用this直接调用方法名（eg: this.myAction()）