Vue 是一款流行的 JavaScript 框架，而 ThinkPHP 則是一款流行的 PHP 開(kāi)發(fā)框架。在前后端分離的開(kāi)發(fā)模式下，前端需要通過(guò) API 來(lái)獲取后端的數(shù)據(jù)。本文介紹如何在 Vue 中獲取 ThinkPHP 的數(shù)據(jù)。

在 Vue 中獲取 ThinkPHP 的數(shù)據(jù)，需要先創(chuàng)建一個(gè)方法來(lái)發(fā)送 HTTP 請(qǐng)求。可以使用 axios 庫(kù)來(lái)發(fā)送請(qǐng)求，代碼如下：

import axios from 'axios'
export default {
methods: {
async getData () {
const response = await axios.get('http://localhost/thinkphp-app/public/api/data')
return response.data
}
}
}

在以上代碼中，我們通過(guò) axios 庫(kù)向 http://localhost/thinkphp-app/public/api/data 發(fā)送了一個(gè) GET 請(qǐng)求，并返回其數(shù)據(jù)。

接下來(lái)，在 Vue 組件中調(diào)用我們剛剛創(chuàng)建的方法，以獲取數(shù)據(jù)。以下是一個(gè)簡(jiǎn)單的例子：

<template>
<div>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
import fetchData from './fetchData.js'
export default {
data () {
return {
items: []
}
},
async created () {
this.items = await fetchData.getData()
}
}
</script>

在以上代碼中，我們導(dǎo)入了剛剛創(chuàng)建的 fetchData 方法，并在 Vue 的 created 鉤子中調(diào)用它。當(dāng)數(shù)據(jù)獲取成功后，我們將其存儲(chǔ)到 Vue 的 data 中，以便在組件中使用。

至此，我們已經(jīng)成功地在 Vue 中獲取了 ThinkPHP 的數(shù)據(jù)。