mapState和mapGetters

mapState和mapGetters是Vue.js中用于将state和getters映射到组件的计算属性的辅助函数。

mapState函数可以将store中的state映射到组件的计算属性中。它接收一个数组或对象作为参数，数组中的元素可以是state中的属性名，或者是一个包含属性名和对应getter的对象。使用mapState后，在组件中就可以直接访问这些计算属性，而不需要在模板中使用this.$store.state来访问。

例如，如果有一个名为count的state属性，可以使用以下方式将其映射到组件的计算属性：

import { mapState } from 'vuex'

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

这样，在模板中就可以直接使用{{ count }}来访问这个计算属性。

mapGetters函数用于将store中的getters映射到组件的计算属性中。它接收一个数组或对象作为参数，数组中的元素可以是getter函数名，或者是一个包含getter函数名和对应的计算属性名的对象。类似地，使用mapGetters后，在组件中就可以直接访问这些计算属性。

例如，如果有一个名为doubleCount的getter函数，可以使用以下方式将其映射到组件的计算属性：

import { mapGetters } from 'vuex'

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

这样，在模板中就可以直接使用{{ doubleCount }}来访问这个计算属性。

通过使用这两个辅助函数，可以简化组件中访问state和getters的代码，使代码更加清晰和易读。