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

创建文件夹

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不一致?
   
   ​实际前面会多一个序号