在 Nuxt.js 3 中从 MySQL 数据库中获取数据

Question

我是 Nuxt.js 3 的新手，我目前正在尝试从我的数据库中显示数据。

数据库是一个MySQL数据库，有一个名为'test'的表。该表有四列：

1. id
2. 姓名
3. 姓氏
4. 年龄

首先我将其下载到我的项目中：npm install @nuxtjs/axios mysql

我在'plugins'文件夹中创建了一个文件'mysql.js'，代码如下：

import mysql from 'mysql'

const connection = mysql.createConnection({
    host: 'myhost',
    user: 'myusername',
    password: 'mypassword',
    database: 'mydatabase',
})

connection.connect()

export default (context, inject) => {
    inject('mysql', connection)
}

我在名为“index.vue”的“页面”文件夹中创建了一个新页面，其中包含以下代码：

<template>
    <div>
      <h1>Test Table Data</h1>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Last Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows" :key="row.id">
            <td>{{ row.id }}</td>
            <td>{{ row.name }}</td>
            <td>{{ row.lastName }}</td>
            <td>{{ row.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  export default {
  data() {
    return {
      rows: [],
    }
  },
  async asyncData({ $mysql }) {
    const rows = await new Promise((resolve, reject) => {
      $mysql.query('SELECT * FROM test', (error, results) => {
        if (error) {
          reject(error)
        } else {
          resolve(results)
        }
      })
    })

    return {
      rows,
    }
  },
}
  </script>

当我启动服务器时，我收到此错误消息。

[warn] [nuxt] 您正在使用具有遗留 Nuxt 2 格式（上下文、注入）的插件，该格式可能已损坏。将来它们将被忽略：(context, inject) => { 注入（'mysql'，连接） }

我尝试了很多不同的方法，但这个解决方案是我在...上得到的错误最少的方法

希望有人能给点提示！ 🤞

Answer 1

首先，由于您使用的是 Nuxt 3，而不是 2，因此您想使用 Nuxt 3 中完成插件的方式。

这方面的文档

你可能想要这样的东西：

import mysql from 'mysql'

export default defineNuxtPlugin(() => {

  const connection = mysql.createConnection({
      host: 'myhost',
      user: 'myusername',
      password: 'mypassword',
      database: 'mydatabase',
  })
  connection.connect()

  return {
    provide: {
      mysql: connection
    }
  }
})

上述代码的文档

另外，你想在你的组件中使用 Nuxt 3，就像这样：

<script setup lang="ts">
const { $mysql } = useNuxtApp()

</script>