vue3中的vuex里面map辅助函数

在 Vue 3 中，Vuex 通过 createStore 函数来创建一个 store 实例。但是在使用 Vuex 进行状态管理时，我们可能需要一些辅助函数来简化代码。在 Vue 3 中，我们可以使用 mapState、mapGetters、mapMutations 和 mapActions 这些辅助函数。

mapState: 将 store 中的 state 映射到组件的计算属性中。例如：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'count'
    ])
  }
}

mapGetters: 将 store 中的 getters 映射到组件的计算属性中。例如：

import { mapGetters } from 'vuex'

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

mapMutations: 将 store 中的 mutations 映射到组件的方法中。例如：

import { mapMutations } from 'vuex'

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

mapActions: 将 store 中的 actions 映射到组件的方法中。例如：

import { mapActions } from 'vuex'

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

需要注意的是，以上辅助函数都可以传入一个对象，以重命名映射的属性或方法名。例如：

import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: 'myCount'
    }),
    ...mapGetters({
      doneTodos: 'myDoneTodos'
    })
  }
}

使用这些辅助函数可以简化代码，并且使代码更具可读性。