如何在vue2.7中实现setup中使用mapState?

import Vue, { reactive, computed } from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建vuex实例
const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

// 创建一个统一的处理方法
function useStoreMapper(mapFn, mapper, isComputed) {
  const storeStateFns = mapFn(...mapper)
  const storeState = {}
  Object.keys(storeStateFns).forEach(fnKey => {
    // 需要绑定store实例
    const fn = storeStateFns[fnKey].bind({ $store: store })
    // state和getters需要通过computed实现响应式
    // mutatuons和actions不需要响应式
    storeState[fnKey] = isComputed ? computed(fn) : fn
  })
  // 使用reactive包装一下，使用的时候就不需要再.value了
  return reactive(storeState)
}


// 映射mapState
export function useStoreState(...mapper) {
  return useStoreMapper(Vuex.mapState, mapper, true)
}

// 映射mapGetters
export function useStoreGetters(...mapper) {
  return useStoreMapper(Vuex.mapGetters, mapper, true)
}

// 映射mapMutations
export function useStoreMutations(...mapper) {
  return useStoreMapper(Vuex.mapMutations, mapper, false)
}

// 映射mapActions
export function useStoreActions(...mapper) {
  return useStoreMapper(Vuex.mapActions, mapper, false)
}

// 导出store
export default store