Vuex辅助函数的使用（mapState、mapActions、mapMutations、mapGetters）

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、为什么需要使用辅助函数

当一个组件需要对多个状态进行操作的时候，代码会有些重复和冗余，我们可以使用辅助函数帮助我们用极少的代码解决这些问题。 注意：使用mapActions、mapMutations时需要在template中传参

累加器案例

展示效果：

template代码：

<div>
  累加器:{{sum}}
  *100后={{sumHandler}} <br>
  <select v-model="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button @click="add(num)">普通加</button>
  <button @click="addSync(num)">延时加</button>
</div>

store中index.js代码：

export default new Vuex.Store({
  state: {
    sum: 0,
  },
  mutations: {
    add(state,num) {
      state.sum += num*1
    }
  },
  actions: {
    addSync(store,num) {
      setTimeout(() => {
        store.commit('add',num)
      },1000)
    }
  },
  getters: {
    sumHandler(state) {
      return state.sum*100
    }
  },
})

二、使用mapState

组件中导入辅助函数:

import { mapState } from 'vuex'

简写形式：

export default {
  computed: ...mapState(["sum"]),
}

等同于以下代码：

export default {
  computed: sum(){return this.$store.state.sum},
}

三、mapGetters

组件中导入辅助函数:

import { mapGetters } from 'vuex'

简写形式：

export default {
  computed: ...mapGetters(['sumHandler']),
}

等同于以下代码：

export default {
  computed: sum(){return this.$store.getters.sumHandler},
}

四、mapMutations

组件中导入辅助函数:

import { mapMutations } from 'vuex'

简写形式：

export default {
  methods: ...mapMutations(['add']),
}

等同于以下代码：

export default {
  methods: add(){return this.$store.commit('add',this.num)},
}

五、mapActions

组件中导入辅助函数:

import { mapActions } from 'vuex'

简写形式：

export default {
  methods: ...mapActions(['addSync']),
}

等同于以下代码：

export default {
  methods: addSync(){return this.$store.dispatch('addSync',this.num)},
}