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

湛海不过深蓝

已于 2022-08-11 11:47:28 修改

阅读量1k

点赞数

分类专栏： vue3+ts 文章标签： javascript vue.js 前端

于 2022-08-11 11:32:25 首次发布

本文链接：https://blog.csdn.net/bbt953/article/details/126281994

版权

vue3+ts 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

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, '==================================')	// 有数据
// 也可以解构去取值，不想写了