Vue 3是一個流行的JavaScript框架，它能夠幫助你開發(fā)快速響應(yīng)的Web應(yīng)用程序。如果你正在使用Vue 3構(gòu)建一個應(yīng)用程序，并且需要從數(shù)據(jù)庫中讀取數(shù)據(jù)，本文將介紹如何實現(xiàn)這個功能。

首先，你需要安裝一個與Vue 3兼容的數(shù)據(jù)庫，例如MongoDB。安裝完成后，你需要創(chuàng)建一個數(shù)據(jù)庫，并增加一些數(shù)據(jù)到其中。

const mongoose = require('mongoose');
const CONNECTION_URI = 'mongodb://localhost:27017/mydatabase';
mongoose.connect(CONNECTION_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'Connection error:'));
db.once('open', function () {
console.log('Connected to database');
});
const sampleSchema = new mongoose.Schema({
name: String,
age: Number,
email: String,
});
const Sample = mongoose.model('Sample', sampleSchema);
const sample = new Sample({
name: 'John',
age: 32,
email: 'john@gmail.com',
});
sample.save(function (err, sample) {
if (err) return console.error(err);
console.log('Sample saved to database');
});

上述代碼連接到MongoDB數(shù)據(jù)庫，并在其中創(chuàng)建了一個名為“sample”的集合，并插入了一條名為“John”的記錄。

接下來，你需要在Vue 3中編寫代碼來獲取這些數(shù)據(jù)。在Vue 3中，你可以使用Axios或Fetch API來獲取數(shù)據(jù)。

import axios from 'axios';
import { reactive } from '@vue/reactivity';
export default {
setup() {
const state = reactive({
samples: [],
});
axios
.get('/samples')
.then((response) =>(state.samples = response.data));
return { state };
},
};

上述代碼通過Axios來獲取數(shù)據(jù)，并使用reactive函數(shù)將其重新活化。你可以通過state.samples訪問數(shù)據(jù)。

這就是如何在Vue 3中讀取數(shù)據(jù)庫。希望本文對你有所幫助！