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())