[vue3+ts]方法一：使用vuex的mapState和mapGetters

src下新建hooks/useState.js

import { computed } from 'vue'
import { mapState, useStore } from 'vuex'
// mapper是存在state中的数据
export function useState(mapper) {
  const store = useStore()

  const storeStateFns = mapState(mapper)

  const storeState = {}
  Object.keys(storeStateFns).forEach(fnKey => {
    const fn = storeStateFns[fnKey].bind({ $store: store })
    storeState[fnKey] = computed(fn)
  })

  return storeState
}

mapState在页面中的使用

import { useState } from '@/hooks/useState'
const storeState:any = useState({
  // 自定义变量名：state => state.命名空间的名称.state中的数据名
  defaultAppId: (state: any) => state.serviceDetails.defaultAppId
})

// 取值方式
const { defaultAppId } = storeState			// 解构取值
console.log(storeState.defaultAppId)		// 有数据
console.log(defaultAppId, '==============')		// 有数据

src下新建hooks/useGetters.js

import { computed } from 'vue'
import { mapGetters, useStore } from 'vuex'

export function useGetters(mapper) {
  const store = useStore()

  const storeGettersFns = mapGetters(mapper)

  const storeGetters = {}
  Object.keys(storeGettersFns).forEach(fnKey => {
    const fn = storeGettersFns[fnKey].bind({ $store: store })
    storeGetters[fnKey] = computed(fn)
  })

  return storeGetters
}

mapGetters在页面中的使用

import { useGetters } from '@/hooks/useGetters'

const storeGetters:any = useGetters({
  // 自定义变量名: 命名空间的模块名/getters中的数据名
  defaultAppId: 'serviceDetails/defaultAppId'
})
console.log(storeGetters.defaultAppId, '==================================')	// 有数据
// 也可以解构去取值，不想写了