5-1 mapMutations

vue中只有通过mutations去改变状态的时候,才会有一个状态记录

一、mapMutations

通过这个方法可以在组件中使用vuex中mutations属性中的方法

demo实现一个跨页面的计数器

1-1 常规方法的实现

<template>
  <div class="about">
    <h1>{{this.$store.state.count}}</h1>
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>
  </div>
</template>
<script>
export default {
  methods:{
    increment(){
      this.$store.commit("increase")
    },
    decrement(){
      this.$store.commit("decrease")
    }
  }
}
</script>

//vuex
export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    increase(state){
      state.count+=1;
    },
    decrease(state){
      state.count-=1;
    }
  }
})

1-2 使用mapMutations

<template>
  <div class="about">
    <h1>{{this.$store.state.count}}</h1>
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>
  </div>
</template>
<script>
import {mapMutations} from 'vuex';
export default {
  methods:{
    ...mapMutations(['increase','decrease'])
  }
}
</script>

1-3和上面方法类似

<template>
  <div class="about">
    <h1>{{this.$store.state.count}}</h1>
    <button @click="add">增加</button>
    <button @click="reduce">减少</button>
  </div>
</template>
<script>
import {mapMutations} from 'vuex';
export default {
  methods:{
    ...mapMutations(['increase','decrease']),
    add(){
      this.increase()
    },
    reduce(){
      this.decrease()
    }
  }
}
</script>

二、mapActions

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    increase(state){
      state.count+=1;
    },
    decrease(state){
      state.count-=1;
    }
  },
  actions: {
    myIncrease(ctx){
      ctx.commit("increase")
    },
    myDecrease(ctx){
      ctx.commit("decrease")
    }
  }
})

<template>
  <div class="about">
    <h1>{{this.$store.state.count}}</h1>
    <button @click="add">增加</button>
    <button @click="reduce">减少</button>
  </div>
</template>
<script>
import {mapActions} from 'vuex';
export default {
  methods:{
    ...mapActions(['myIncrease','myDecrease']),
    add(){
       this.myIncrease()
    },
    reduce(){
       this.myDecrease()
    }
  }
}
</script>