Vue3中对mapState进行简易的封装

正文

在Vuex中，为了方便在组件中访问状态，提供了mapState方法，该方法返回一个函数，该函数接收一个映射函数作为参数，该映射函数将状态映射为组件的计算属性。

在Vue2中，获取Vuex中数据的方式是通过mapState方法，该方法返回一个函数，该函数接收一个对象作为参数，该对象包含要映射的状态键值对。例如：

import { mapState } from 'vuex'

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

在Vue3中，获取Vuex中数据的方式是通过useStore方法，该方法返回一个对象，该对象包含对Vuex状态和getter的引用。例如：

import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    return {
      count: store.state.count,
      name: store.state.name
    }
  }
}

那么，我们如何对mapState进行简易的封装呢？我们可以创建一个名为useMapState的函数，该函数接收一个映射函数作为参数，该映射函数将状态映射为组件的计算属性。例如：

import { useStore } from 'vuex'

export function useMapState(mapFn) {
  const store = useStore()
  return mapFn(store.state)
}

然后，我们就可以在组件中使用useMapState函数来获取Vuex中的状态，例如：

import { useMapState } from '@/composables/use-map-state'

export default {
  setup() {
    const { count, name } = useMapState((state) => ({
      count: state.count,
      name: state.name
    }))
    return {
      count,
      name
    }
  }
}

这样，我们就对mapState进行了简易的封装，使我们可以在组件中更加方便地获取Vuex中的状态。