Vue2.0 Vuex 便于编写的功能mapState、mapGetters、mapActions、mapMutation

再提一个需求:我在bilibiliVue

把这俩个属性都存在vuex里然后读出来做展示:

store > index.js

//准备state:用于存储数据
const state = {
    sum:0,
    school:'bilibili',
    subject: 'Vue'
}

Add.vue

<h4>我在{{$store.state.school}},学习{{$store.state.subject}}</h4>

这个时候功能实现了

你有没有发现使用Vuex里面很多数据的时候,一直都是在写$store.state这段代码?

这一遍一遍的写是否不好。 我们的目标是直接写school和subject ,这问题怎么办。

  • 可以使用计算属性来写:

    <template>
    	<div>
            ....
            <h4>我在{{school}},学习{{subject}}</h4>
        </div>
    </template>
    <script>
    	export default{
            ....
            computed:{
                sum(){
                    return this.$store.state.sum
                },
                school(){
                    return this.$store.state.school
                },
                subject(){
                    return this.$store.state.subject
                },
    
                bigSum(){
                    return this.$store.getters.bigSum
                }
            },
        }
    </script>
    

    觉不觉得计算属性里的形式很固定?

    每一个人都要说一下计算属性名和都要说一下自己读取的是state里的哪个数据

    是不是觉得return this.$store代码是一样的

    Vuex的作者能不能给我们一个方法批量去生成return this.$store?

    从Vuex身上引出mapState(映射状态),要求你把方法名告诉它

    import {mapState} from 'vuex'
    ...
    mounted(){ 
        //console.log('Add',this.$store)
        //里面要传入一个对象
        const x = mapState({{sum:'sum',school:'school',subject:'subject'}})
        console.log(x)
    },
    ...
    

    看看这个x到底是啥:

    {sum: ƒ, school: ƒ, subject: ƒ}
        school: ƒ mappedState()
        subject: ƒ mappedState()
        sum: ƒ mappedState()
        [[Prototype]]: Object
    
    computed:{
        //...:代表把对象里面的每一组k-v分开和放在对象里面
       	//也就是把sum、school、subject都分开放到这里面了
       	//借助mapState生成计算属性,从state中读取数据(对象写法)
       ...mapState({sum:'sum',school:'school',subject:'subject'})//写这个查看时Vue开发者工具会显示vuex bindings(这个没有简写形式)
    },
    

    就相当于你写了:

    computed:{
        sum(){
            return this.$store.state.sum
        },
        school(){
            return this.$store.state.school
        },
        subject(){
            return this.$store.state.subject
        },
        bigSum(){
            return this.$store.getters.bigSum
        }
    },
    

    mapState数组写法:

    ...mapState(['sum','school','subject']),
    

    但是这样写的坏处就是如果方法与值不同名就会找不到值得问题

    用数组得写法就是要生成得计算属性名与state里的值得是同名的


  • 既然有mapState那还有mapGetters

computed:{
	...mapState(['sum','school','subject']),
        
	...mapGetters(['bigSum'])
},

总结

mapState方法:用于帮我们映射state中的数据为计算属性

computed(){
    //借助mapState生成计算属性: sum、school、subject(对象写法)
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
        
   //借助mapState生成计算属性: sum、school、subject(数组写法)
   ...mapState(['sum','school','subject'])
}

mapGetters方法: 用于帮助我们映射getters中的数据为计算属性

computed(){
    //借助mapGetters生成计算属性: bigSum(对象写法)
    ...mapState({bigSum:'bigSum'}),
        
   //借助mapGetters生成计算属性: bigSum(数组写法)
   ...mapState(['bigSum'])
}

methods: {
    add(){
        this.$store.commit('jia',this.n)
    },
    jf(){
        this.$store.commit('jian',this.n)
    },

    /************************** */
    jAdd(){
        this.$store.dispatch('jadd',this.n)
    },
    delayAdd(){
        this.$store.dispatch('delayAdd',this.n)
    }
},

mapState差不多,就是名字是mapMutations:

methods:{
    ...mapMutations({'add':'JIA','jian':'JIAN'})
}

然后就出现了错误

store > index.js

//准备mutations:用于操作数据(state)
const mutations = {
    JIA(state,value){
        //它带过来的值到底是多少
        console.log('@@@@@@', value)
        state.sum += value
    },
    JIAN(state,value){
        state.sum -= value
    },
}
PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

借助配置项 生成一个add方法

我们自己写的add方法:

add(){
    this.$store.commit('JIA',this.n)
}

但是生成的add方法:

add(value){
    this.$store.commit('JIA',value)
}

所以它不知道要加的是在哪里

怎么解决?

<button @click="add(n)">+</button>
<button @click="jf(n)">-</button>

数组写法(只能写mutations里的名字):

...mapMutations(['JIA','JIAN'])

所以生成的方法是JIA()

Vuex集中式管理中没有dispatch而是mapActions

<template>
  <div>
      <h3>当前求和:{{sum}}</h3>
      <h4>当前求和的值放大10倍:{{$store.getters.bigSum}}</h4>
      <h4>我在{{school}},学习{{subject}}</h4>
      <select name="" id="" v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="jf(n)">-</button>
      <button @click="jadd(n)">当前求和为奇数再加</button>
      <button @click="delayAdd(n)">等一等再加</button>
  </div>
</template>

<script>
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
        name: 'Add',
        components:{},
        data() {
            return {
                n:1,
            }
        },
        methods: {
            ...mapMutations({add:'JIA',jf:'JIAN'}),
            
            ...mapActions(['jadd','delayAdd'])
        },
    }
</script>

mapActions与mapMutations使用时,若需要传递参数需要:再模板中绑定事件时传递好参数,否则参数是事件对象。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结城明日奈是我老婆

支持一下一直热爱程序的菜鸟吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值