Vue.js框架：vue3引入mockjs模擬數據調試

一、引入依賴

　　1、安裝依賴包

　　在終端中使用以下命令：

    npm install @types/mockjs --save

　　

　　此處使用了@types進行引入，是因爲在.ts文件引用包時，默認必須有類型聲明，不能是any。

　　有很多依賴包是用純JS寫的，沒有類型聲明。

　　因此使用@types作爲類型聲明的集中倉庫，對ts項目中引用依賴提供類型說明。

二、模擬數據

　　1、mock.ts引入並對接口進行數據模擬

　　使用Mock.mock進行模擬，三個參數分別是接口地址、數據訪問方式、模擬的數據。

    import Mock from 'mockjs'

    Mock.mock('/api/list','get',{
        "list":[
            {
                id: 1,
                name: "張三"
            },
            {
                id: 2,
                name: "李四"
            }
        ],
        length: 2
    })

　　2、將模擬數據掛載到main.ts

　　在main.ts文件中引入mock.ts。

    // 引入mockjs
    import './api/mock'

　　3、在頁面進行數據訪問並回顯

　　定義響應式數據listData，其內的list屬性值用來存儲模擬數據。定義getData方法訪問接口並接受模擬數據值，頁面對數據進行回顯。

    <script setup lang="ts">
    import { onMounted, reactive } from "vue";
    import { getList } from "../utils/index";

    let listData = reactive({
      list: []
    })
    const getData = () =>{
      getList().then(res=>{
        listData.list = res.data.list
      })
    }

    onMounted(()=>{
      getData()
    })
    </script>

    <template>
      <div style="padding: 20px;" v-for="item in listData.list" :key="item.id">
        <span style="color: #ffffff;">id:{{ item.id }}</span>
        <br />
        <span style="color: #ffffff;">name:{{ item.name }}</span>
        <br />
      </div>
    </template>

　　結果如下：