vite+vue3+ts从0到1搭建企业级项目（3）

yarn add pinia --save

import { createPinia } from 'pinia'
 const store = createPinia()
 export default store

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from '@/router'
import store from './store'
const app=createApp(App)
app.use(router)
app.use(store)
app.mount('#app');

import { defineStore } from 'pinia'
// 定义状态的接口
interface State {
    count: number; // 计数值
    name: string; // 用户名
}
// 使用 defineStore 创建一个 store
export const useStore = defineStore('main', {
    // 定义状态
    state: (): State => ({
        count: 0, // 初始计数值为 0
        name: 'John Doe', // 初始用户名为 'John Doe'
    }),
    // 定义 getters
    getters: {
        // 定义一个 getter，返回 count 的两倍
        doubleCount(): number {
            return this.count * 2
        },
    },
    // 定义 actions
    actions: {
        // 定义一个 action，将 count 值加 1
        increment() {
            this.count++
        },
    },
})

<template>
    <div>
        <!-- 显示 count 值 -->
        <p>Count: {{ store.count }}</p>
        <!-- 显示 name 值 -->
        <p>name: {{ store.name }}</p>
        <!-- 显示 count 值的两倍 -->
        <p>Double Count: {{ store.doubleCount }}</p>
        <!-- 点击按钮时，调用 increment action，将 count 值加 1 -->
        <button @click="store.increment">Increment</button>
    </div>
</template>
  
<script lang="ts" setup>
import { useStore } from '@/store/user.ts'
// 使用 store
const store = useStore()
</script>

yarn add @vueuse/core

<template>
    <div>
        <p>
            <!-- 撤销按钮，点击后调用undo方法 -->
            <button @click="undo"> 撤销 </button>
            <!-- 重做按钮，点击后调用redo方法 -->
            <button @click="redo"> 重做 </button>
        </p>
        <!-- 文本输入区域，双向绑定到text变量 -->
        <textarea v-model="text" />
        <!-- 列表开始，遍历history数组，显示每一个entry -->
        <ul>
            <li v-for="entry in history" :key="entry.timestamp">
                <!-- 显示history中每一项的内容 -->
                {{ entry }}
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
// 导入vue的ref方法
import { ref } from 'vue'
// 导入vueuse库的useRefHistory方法
import { useRefHistory } from '@vueuse/core'
// 定义一个响应式引用变量text，初始值为空字符串''
const text = ref('')
// 使用useRefHistory方法创建历史记录，提供undo和redo方法
const { history, undo, redo } = useRefHistory(text)
</script>

<style scoped>
// 定义按钮的样式
button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;
}
</style>

yarn add less

yarn add axios

import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
// 创建axios实例
const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API, // api的base_url
    timeout: 5000 // 请求超时时间
})
// 定义接口
export interface ResponseData<T = any> {
    code: number,
    data: T,
    message: string
}
// request拦截器
service.interceptors.request.use(
    (config: InternalAxiosRequestConfig) => {
        // 在这里可以做些什么，例如添加token到headers
        return config
    },
    (error: any) => {
        // 请求错误时做些事情
        console.log(error) // for debug
        return Promise.reject(error)
    }
)
// respone拦截器
service.interceptors.response.use(
    (response: AxiosResponse) => {
        /**
         * 在这里可以对响应数据做些什么
         * 如果你想获取http信息，如headers或status
         * 请返回response => response
        */
        const res = response.data;
        return res;
    },
    (error: any) => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
export default {
    // get方法
    get<T = any>(url: string, params: object = {}): Promise<T> {
        return service({
            url: url,
            method: 'get',
            params: params
        })
    },
    // post方法
    post<T = any>(url: string, data: object = {}): Promise<T> {
        return service({
            url: url,
            method: 'post',
            data: data
        })
    },
    // put方法
    put<T = any>(url: string, data: object = {}): Promise<T> {
        return service({
            url: url,
            method: 'put',
            data: data
        })
    },
    // delete方法
    delete<T = any>(url: string, params: object = {}): Promise<T> {
        return service({
            url: url,
            method: 'delete',
            params: params
        })
    }
}

//pet.ts
import request from "@/utils/request";
export function getPet(petId: string) {
    return request.get(`/pet/${petId}`);
}

<script lang="ts" setup>
import { getPet } from '@/api/pet'
getPet('1').then(res => {//这里传的值需要和接口定义的类型一致
    console.log(res);
})
</script>