Vue3及ts项目搭建过程中遇到的问题（一）-一一网

vue3发布后，有过一些摸索，在理解了组合式API后，又碰到了一些其他问题，比如vue router、axios、vuex这些经常会用到的工具，怎么添加ts类型呢？刚开始感觉无从下手，通过学习别人的项目及开发思路，总结了一些学习经验，做个记录。

项目搭建

Vue Cli文档地址：cli.vuejs.org/zh/guide/in…

npm install -g @vue/cli or yarn global add @vue/cli
vue create vue3 -project
复制代码

Vue Router

版本v4.x，文档地址：next.router.vuejs.org/zh/guide/ad…

由于vue3引入组合式API，vue router也做了相应升级，并添加ts的类型定义：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
复制代码

因为我们在setup里面没有访问this，所以我们不能再直接访问 this.$router 或 this.$route，可采用组合API的方式引入

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    const jump = (query) {
      router.push({
        path: '/about',
        query: {
          ...route.query,
        },
      })
    }
  }
}
复制代码

Axios

文档地址：axios-http.com/zh/docs/int…

和之前不同的是，我们可以添加ts，配置接口返回值的类型，便于开发。在项目中，首先添加axios的基础配置，请求拦截以及响应拦截：

axios.ts

import axios, { AxiosInstance } from 'axios'
import { ElNotification } from 'element-plus'

// 创建axios实例
const service: AxiosInstance = axios.create({
  baseURL: '',
  timeout: 300 * 1000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 自定义返回的code
    if (res.code !== 1) {
      return Promise.reject(res)
    }
    return response
  },
  error => {
    if (error.response) {
      ElNotification({
        type: 'error',
        message: errorMessage(error.response.status)
      })
    }
    return Promise.reject(error)
  }
)

const errorMessage = (status: number) => {
  let message = ''
  switch (status) {
    case 401:
      message = '未授权，请重新登录'
      break
    case 404:
      message = '请求出错'
      break
    case 500:
      message = '服务器错误'
      break
    default:
      message = `请求出错(${status})!`
  }
  return message
}

export default service

复制代码

request.ts

import { AxiosRequestConfig } from 'axios'
import service from 'utils/axios'

// 基础类型
interface BaseResponse<T> {
  code: number
  data: T
  message?: string
}

const get = <T>(config: AxiosRequestConfig): Promise<BaseResponse<T>> => {
  return request({ ...config, method: 'GET' })
}

const post = <T>(config: AxiosRequestConfig): Promise<BaseResponse<T>> => {
  return request({ ...config, method: 'POST' })
}

const request = <T>(config: AxiosRequestConfig): Promise<BaseResponse<T>> => {
  return new Promise((resolve, reject) => {
    service.request<BaseResponse<T>>(config).then(
      res => {
        resolve(res.data)
      },
      (err: Error) => {
        reject(err)
      }
    )
  })
}

export { get, post }
export default request

复制代码

在api中引入request.ts,并传入接口返回值类型，接下来是一个请求示例：

import request from 'utils/request'

export type ListData = {
  id: string
  month: string
  date: string
  name: string
  province: string
  area: string
  address: string
  postcode: string | number
}

export interface TableRequest {
  currentPage?: number
  pageSize?: number
}

export interface TableResponse {
  list: ListData[]
  total: number
}

export function getTableData(params?: TableRequest) {
  return request<TableResponse>({
    url: '/table/list',
    method: 'get',
    params
  })
}
复制代码

当在项目中发起接口请求时，我们可以清楚的看到列表中所包含的数据，vscode会有对应的提示如下：