vuex的map使用

在Vue.js中使用Vuex进行状态管理时，我们通常会使用map函数来简化代码。map函数提供了一些辅助函数，可以将Vuex中的状态映射到组件的计算属性或方法中。以下是常用的map函数：

1. mapState：将Vuex中的状态映射到组件的计算属性中。

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count
    })
  }
}

2. mapGetters：将Vuex中的getter映射到组件的计算属性中。

import { mapGetters } from 'vuex'

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

3. mapMutations：将Vuex中的mutation映射到组件的方法中。

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

4. mapActions：将Vuex中的action映射到组件的方法中。

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}