vue3+ts 数据对接

<think>好的，用户想了解在Vue3与TypeScript项目中进行数据对接的教程和示例。首先，我需要回忆一下Vue3和TypeScript结合的最佳实践，以及如何对接API。 首先，Vue3的组合式API和TypeScript的类型系统可以很好地结合。用户可能需要知道如何设置项目结构，比如使用vue-cli或Vite初始化项目，并集成TypeScript。然后是关于组件的编写，如何定义Props和Emits的类型，以及如何使用Composition API中的ref和reactive进行状态管理。 接下来是数据对接部分，通常涉及HTTP请求。用户可能需要使用axios或fetch来发送请求，这里需要示例如何封装一个带有TypeScript类型的请求模块。比如，创建axios实例，设置拦截器，处理请求和响应数据。同时，要考虑到TypeScript的泛型来定义返回的数据结构，确保类型安全。 用户提供的引用中提到了通义千问接口的对接，所以需要示例如何将API密钥添加到请求头，这可能涉及请求拦截器的配置。同时，需要处理异步请求，比如在setup函数中使用async/await或then/catch来处理数据获取和错误处理。 另外，状态管理也是重要的一环。如果项目复杂，可能需要使用Pinia来管理全局状态，并展示如何定义带有类型的store。 还需要考虑组件的生命周期，比如在onMounted钩子中触发数据获取，以及如何处理加载状态和错误提示。 最后，要确保所有示例代码符合TypeScript的类型检查，避免any类型，提高代码的可维护性和类型安全。同时，引用用户提供的参考资料，特别是关于vue-typescript和TypeScript进阶特性的部分，来支持建议的实践方法。 检查是否有遗漏的步骤，比如环境变量的配置，或者如何处理跨域问题，但用户可能更关注前端部分的对接，所以可以简要提及配置代理或后端设置CORS。 总结步骤：项目初始化、组件类型定义、HTTP模块封装、API对接示例、状态管理、生命周期处理，最后是示例代码和注意事项。</think>以下是在Vue3与TypeScript项目中进行数据对接的完整实现步骤和示例： ### 一、项目初始化 1. 使用Vite创建Vue3+TS项目 ```bash npm create vite@latest my-project -- --template vue-ts ``` ### 二、核心类型定义 定义API响应格式（示例）： ```typescript // types/api.ts export interface ApiResponse<T> { code: number data: T message?: string } export interface ChatMessage { role: 'user' | 'assistant' content: string timestamp: number } ``` ### 三、HTTP请求封装 ```typescript // src/utils/http/index.ts import axios, { AxiosInstance, AxiosRequestConfig } from 'axios' const service: AxiosInstance = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) // 请求拦截器（处理鉴权） service.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${localStorage.getItem('apiKey')}` return config }) // 响应拦截器（统一错误处理） service.interceptors.response.use( response => response.data, error => { console.error('API Error:', error) return Promise.reject(error) } ) export const http = { get<T>(url: string, config?: AxiosRequestConfig): Promise<T> { return service.get<T>(url, config) }, post<T>(url: string, data?: object, config?: AxiosRequestConfig): Promise<T> { return service.post<T>(url, data, config) } } ``` ### 四、API接口调用示例（通义千问） ```typescript // src/api/chat.ts import { http } from '@/utils/http' import type { ApiResponse } from '@/types/api' export const sendMessage = (message: string) => { return http.post<ApiResponse<ChatMessage>>('/chat/completions', { prompt: message, max_tokens: 1000 }) } ``` ### 五、Vue组件实现 ```vue <script setup lang="ts"> import { ref, reactive } from 'vue' import { sendMessage } from '@/api/chat' interface ChatState { messages: ChatMessage[] inputText: string loading: boolean } const state = reactive<ChatState>({ messages: [], inputText: '', loading: false }) const handleSubmit = async () => { if (!state.inputText.trim()) return try { state.loading = true const userMessage: ChatMessage = { role: 'user', content: state.inputText, timestamp: Date.now() } state.messages.push(userMessage) const response = await sendMessage(state.inputText) const aiMessage: ChatMessage = { role: 'assistant', content: response.data.content, timestamp: Date.now() } state.messages.push(aiMessage) } catch (error) { console.error('发送失败:', error) } finally { state.loading = false state.inputText = '' } } </script> ``` ### 六、最佳实践建议 1. **类型安全**：始终为API响应定义接口类型 2. **环境变量**：使用`import.meta.env`管理不同环境的API地址 3. **错误处理**：全局拦截器中统一处理网络错误和业务错误 4. **状态管理**：复杂场景建议使用Pinia进行状态管理[^2] 5. **代码组织**：遵循模块化原则分离接口定义和业务逻辑