针对Vuex +TS 的请求方法

Question

老师,你好,我根据十二章写的过程列出来来了,问题再最后

创建文件夹

mkdir 
lookup ## 项目文件夹
,lookup\getters ## 获得属性方法
,lookup\api ## 请求方法
,lookup\serverdata ## 服务器数据
,lookup\state ## 属性
,lookup\types ## 方法名称

创建文件

ni 
lookup\lookupModule.ts
,lookup\getters\index.ts
,lookup\api\index.ts
,lookup\serverdata\index.ts
,lookup\state\index.ts
,lookup\types\index.ts

在store中注册

store\index.ts

import { createStore } from 'vuex'
import { LookupModule } from '@/store/lookup/lookupModule'


let store = createStore({
    modules: {
        ...
        LookupModule,
        ...
    }
})

export default store

state

store\lookup\state\index.ts

export type TLookupDetails = {
    fk_lookups: number
    item: string
    category: string
}

export type TLookup = {
    id: number
    name: string
    lookup_details_set: TLookupDetails
}

export interface LookupProps {
    [key: string]: TLookup
}

export interface LookupStateListProps {
    lookupInfoList: LookupProps
}

const state: LookupStateListProps = {
    lookupInfoList: {}
}

export { state }

getters

store\lookup\getters\index.ts

import store from '@/store'
import { LookupStateListProps } from '../state'

type LookupModuleGetters = {
    'LookupModule/getLookupList': (state: LookupStateListProps) => void
}

function getLookupModuleGetters() {
    return store.getters as LookupModuleGetters
}

export default getLookupModuleGetters()

api

store\lookup\api\index.ts

import request from '@/utils/request'
import { AxiosPromise } from 'axios'

class LookupApi extends request {
    constructor() {
        super()
    }

    Get = (): AxiosPromise => {
        return this.service.get('api/basic/lookup/')
    }
}

export default new LookupApi()

serverdata

store\lookup\serverdata\index.ts

import Lookup from '@/api/lookup'
import { TLookup } from '@/store/lookup/state'

async function convertToRecord(lookupRec: Record<any, TLookup> = {}) {
    const lookupList: any = await Lookup.Get().then((res) => res)

    lookupList.map((lookup: TLookup) => {
        lookupRec[lookup.id] = lookup
    })
    return lookupRec
}

export default convertToRecord()

types

store\lookup\types\index.ts

export enum Types {
    FindLookupList = 'FindLookupList'
}

lookupModule

store\lookutypesp\lookupModule.ts

import { Module } from 'vuex'
import { RootState } from '@/store/rootState'
import { state } from '@/store/lookup/state'
import { Types } from '@/store/lookup/types'
import lookupRec from './serverdata'

export const LookupModule: Module<any, RootState> = {
    namespaced: true,
    state,
    getters: {
        getLookupList(state) {
            return state.lookupInfoList
        }
    },
    mutations: {
        [Types.FindLookupList](state, allLookup) {
            state.lookupInfoList = allLookup
        }
    },
    actions: {
        async [Types.FindLookupList]({ commit }) {
            commit(Types.FindLookupList, lookupRec)
        }
    }
}

在vue中使用

<template>
    <div>
        {{ abc }}
    </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, computed } from 'vue'
import store from '@/store'
import getLookupModuleGetters from '@/store/lookup/getters'

//组件挂载之前
onBeforeMount(async () => {
    //页面渲染之前,向服务器请求
    await store.dispatch('LookupModule/FindLookupList')
})

const abc = computed(() => {
    //计算属性去获得
    return getLookupModuleGetters['LookupModule/getLookupList']
})
</script>

<style lang="scss" scoped></style>

问题

1. 页面上不是数据,而是Promise
   
2. 请求回来的数据,与postman不一致?
   
   ​实际前面会多一个序号
   

Answer 1

keviny79 2022-04-24 20:18:19

问题1： 页面上呈现promise， 检查 actions   commit中 传递的lookupRec 数据是否是promise，保存什么类型的数据，取出来就是什么类型的数据。

问题2：你说的”前面会多一个序号“  那是浏览器显示出来的 数组元素默认的下标，而postman是以控制台形式打印数组，没有展示下标。

• 提问者 乔刻力 #1

  老师，控制台，我是数据刚请求成功后拿到的；还没存到lookupRec中，
  同样请求，在Vue里面打印，控制台不会有序号，到在vuex 里面会有

• keviny79 回复 提问者 乔刻力 #2

  一个是浏览器的控制台，会自动显示数组下标，postman 是按 vscode终端控制台形式，会隐藏数组下标。

• 提问者 乔刻力 #3

  老师，能约个时间，帮我看下吗

点开查看后面2条评论