Vue3 +TScript 基本开发-优快云博客

本文介绍了如何使用Vite初始化一个包含typescript的Vue项目，并引入Pinia进行状态管理。在main.ts中设置Pinia，然后在App.vue中导入和布局组件。同时，展示了store/todos.js文件中如何利用axios与接口交互，进行数据的获取、修改、删除和添加操作，以及如何使用computed属性处理数据过滤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先你要使用 vite 创建项目

npm init vue@latest

并选择带ts的版本
在这里插入图片描述

文件的结构
在这里插入图片描述
main.ts 文件

import { createApp } from "vue"
import { createPinia } from 'pinia'

import App from "./App.vue"
const pinia = createPinia()
const app = createApp(App)

app.use(pinia).mount("#app")

App.vue 文件

<script setup>
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";

</script>
<template>
  <section class="todoapp">
    <TodoHeader></TodoHeader>
    <TodoMain></TodoMain>
    <TodoFooter></TodoFooter>
  </section>
</template>

store / todos.js 文件

import axios from 'axios'
// import { el } from 'element-plus/es/locale'
import {defineStore} from 'pinia'
import {computed, ref} from 'vue'

export default defineStore('todos', () => {
    let list = ref([])

    // 得到数据
    const getList = async () => {
        const res = await axios.get('/list')
        list.value = res.data
        console.log('得到数据',res)
    }
    // 修改状态
    const editStatus = async (id,obj) => {
        const res = await axios.patch('/edit/'+id,obj)
        console.log('修改状态',res)
    }
    // 删除当前项
    const delData = async (id) => {
        const res = await axios.delete('/del/'+id)
        console.log('删除当前项', res)
    }
    // 添加
    const addData = async (obj) => {
        const res = await axios.post('/add',obj)
        console.log('添加', res)
    }
    // 计算属性
    const type = ref('all')
    const setType = curType => type.value = curType
    
    const listType = computed(()=> {
        if(type.value === 'all') {
            return list.value
        } else if(type.value === 'yes') {
            return list.value.filter(it => it.isDone)
        } else {
            return list.value.filter(it => !it.isDone)
        }
    })
    
    console.log('type属性',type)

    // 导出
    return {
        list,
        getList,
        editStatus,
        delData,
        addData,
        setType,
        type,
        listType
    }
})