vuex 使用模块,怎样使用接口?

来源:8-3 登录第二部分 axios 设置通用 header

慕尼黑8466541

2020-11-29

老师您好!

**
vuex 使用模块
请问在state这里怎样使用 PartnerDataProps接口**
interface Icd {
  id: number
  name: string
  pcs: number
}

interface Ipartner {
  id: number
  create_time?: string
  update_time?: string
  cat_id: number
  cat_text: string
  grade_id: number
  grade_text?: string
  name: string
  linkman: string
  phone: string
  telephone: string
  address: string
  memo: string
  status: number
  status_text: string
  delete_time?: null | string
}

export interface PartnerDataProps {
  cat: Icd[]
  grade: Icd[]
  partner: Ipartner[]
}

// 老师您好,请问在state这里怎样使用 PartnerDataProps接口
const state = () => ({
  cat: [],
  grade: [],
  partner: [],
})

const mutations = {
  fetchCat(state, rawData) {
    state.cat = rawData.data
  },
  fetchGrade(state, rawData) {
    state.grade = rawData.data
  },
  fetchPartners(state, rawData) {
    state.partner = rawData.data
  },
}

const actions = {
  fetchCat(context) {
    axios.get('api/partner/cat').then((res) => {
      context.commit('fetchCat', res.data)
    })
  },
  fetchGrade(context) {
    axios.get('api/partner/grade').then((res) => {
      context.commit('fetchGrade', res.data)
    })
  },
  fetchPartners(context) {
    axios.get('api/partner').then((res) => {
      context.commit('fetchPartners', res.data)
    })
  },
  partnerAndFetch({ dispatch }) {
    return dispatch('fetchCat').then(() => {
      return dispatch('fetchGrade').then(() => {
        return dispatch('fetchPartners')
      })
    })
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
}
写回答

1回答

张轩

2020-11-30

同学建议你这样写 

import { Module } from 'vuex'

// Module 类型接受两个泛型,第一个就是你的 state 的泛型,第二个是全局 state 的泛型,可以不传
const module : Module<PartnerDataProps> = {
    state: {
        // 这里面会被PartnerDataProps类型约束了~
    },
    mutations: {
        // 函数的参数类型会推论
    },
    actions: {
        // 参数同样会被推论
    }
}
export default module


1
1
慕尼黑8466541
谢谢老师
2020-11-30
共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程