本章节主要讲述Vuex里面的四个优化代码的map方法,mapState、mapGetters、mapActions、mapMutation
一、store文件夹下面index.js主要内容,包含state
(用于存储数据)、getters(计算属性)、mutatiions(加工数据)、actions(相应组件动作、写逻辑)
二、四个map方法,使用Vuex会频繁出现this.$store.commit、this.$store.dispatch、this.$store.state、this.$store.getters
,为了避免出现重复代码,导致代码冗余,使用map的方法来简化代码。
先从vuex中导入要使用的map方法
import {mapState,mapActions,mapMutations、mapGetters} from 'vuex';
1、mapState方法:用于帮助我们映射state中的数据为计算属性
computed: {
//借助mapState生成计算属性:sum、school、subject(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性:sum、school、subject(数组写法)
...mapState(['sum','school','subject']),
},
2、mapGetters方法:用于帮助我们映射getters中的数据为计算属性
computed: {
//借助mapGetters生成计算属性:bigSum(对象写法)
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性:bigSum(数组写法)
...mapGetters(['bigSum'])
},
3、mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数,如果需要传递参数需要在模板中传递号参数
methods:{
//靠mapActions生成:incrementOdd、incrementWait(对象形式)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成:incrementOdd、incrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
4、mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数,如果需要传递参数需要在模板中传递号参数
methods:{
//靠mapActions生成:increment、decrement(对象形式)
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//靠mapMutations生成:JIA、JIAN(对象形式)
...mapMutations(['JIA','JIAN']),
}