Vue 四个map的使用方法
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方法：用于帮助我们映射state中的数据为计算属性。
computed:{
//借助mapGetters生成计算属性：bigSum（对象写法）
...mapGetters({bigSum:\'bigSum\'}),
//借助mapGetters生成计算属性：bigSum（数组写法）
...mapGetters([\'bigSum\'])
}
3. mapActions 方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数。
methods: {
//靠mapActions生成：incrementOdd、incrementWait（对象形式）
...mapActions({incrementOdd:\'incrementOdd\',incrementWait:\'incrementWait\'}),
//靠mapActions生成：incrementOdd、incrementWait（数组形式）
...mapActions([\'incrementOdd\',\'incrementWait\']),
},
4. mapMutations 方法：用于帮助我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数。
methods: {
//靠mapMutations生成：increment、decrement（对象形式）
...mapMutations({INCREMENT:\'INCREMENT\',DECREMENT:\'DECREMENT\'}),
//靠mapMutations生成：increment、decrement（数组形式）
...mapMutations([\'INCREMENT\',\'DECREMENT\']),
},
/* Count.vue */ 这门课是{{ school }}的{{ subject }}课程
当前求和为：{{ sum }}
当前求和放大十倍为：{{ bigSum }}
1 2 3 import {mapState,mapGetters,mapMutations,mapActions} from \'vuex\' export default { name:\'Count\', data() {return { n:1}}, methods: { // increment(){ // //只需要执行state中sum的加法功能，逻辑简单可以不写dispatch // this.$store.commit(\'INCREMENT\',this.n) // }, // decrement(){ // //只需要执行state中sum的减法功能，逻辑简单可以不写dispatch // this.$store.commit(\'DECREMENT\',this.n) // }, //靠mapMutations生成：increment、decrement（对象形式） // ...mapMutations({INCREMENT:\'INCREMENT\',DECREMENT:\'DECREMENT\'}), //靠mapMutations生成：increment、decrement（数组形式） ...mapMutations([\'INCREMENT\',\'DECREMENT\']), /* **************************************************************** */ // incrementOdd(){ // this.$store.dispatch(\'incrementOdd\',this.n) // }, // incrementWait(){ // this.$store.dispatch(\'incrementWait\',this.n) // }, //靠mapActions生成：incrementOdd、incrementWait（对象形式） // ...mapActions({incrementOdd:\'incrementOdd\',incrementWait:\'incrementWait\'}), //靠mapActions生成：incrementOdd、incrementWait（数组形式） ...mapActions([\'incrementOdd\',\'incrementWait\']), }, computed:{ //借助mapState生成计算属性：sum、school、subject（对象写法） // ...mapState({sum:\'sum\',school:\'school\',subject:\'subject\'}), //借助mapState生成计算属性：sum、school、subject（数组写法） ...mapState([\'sum\',\'school\',\'subject\']), /* **************************************************************** */ //借助mapGetters生成计算属性：bigSum（对象写法） // ...mapGetters({bigSum:\'bigSum\'}), //借助mapGetters生成计算属性：bigSum（数组写法） ...mapGetters([\'bigSum\']) } } button{ margin-left: 5px; }
