Question

我正在尝试将MongoDB用于Vuex不适合的长期和复杂存储。

我已经安装并运行了MongoDB，并且安装了mongoose软件包。

在我的plugins文件夹中，有一个创建脚本来初始化模块并将其导出：

plugins / mongoose.js

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/users', { useNewUrlParser: true });

export default({ app }, inject) => {

    inject('mongoose', mongoose);

}

然后在我的nuxt.config.js中，声明模块并将其设置为仅服务器端。

nuxt.config.js

...
plugins: [
    { src: '~/plugins/mongoose.js', mode: 'server' },
],
...

最后，在我的其中一个页面中，我尝试使用一种方法来访问它。

页面/用户.vue

<template>
    <button @click="addUser('joe')">Joe</button>
</template>

<script>
    export default {
        methods: {
            addUser(name) {
                console.log(this.$mongoose);
            }
        }
    }
</script>

，然后单击控制台中的按钮，我得到cannot stringify a function change，然后得到cannot stringify a function name。我无法确定这是否有效，但是我无法使用mongoose对象的任何属性。

关于该主题的信息似乎并不多，即使看起来很普遍。

Answer 1

您不能这样做。 Nuxt是前端。因此，代码将在其浏览器的客户端上执行。当用户单击按钮时，您的事件将在浏览器中执行。所以你不能在那里访问猫鼬。猫鼬在浏览器中不起作用，仅在节点中起作用。

因此，您需要具有可以执行猫鼬式工作的后端，并使用REST或GraphQL或其他任何方式从nuxt发送\接收数据

Answer 2

您可以创建自己的serverMiddleware，然后在asyncData中调用它。简化后，我有以下内容：

// nuxt.config.js
const bodyParser = require('body-parser')

export default {
  ...,
  serverMiddleware: [
    bodyParser.json(),
    { path: '/db-api', handler: '~/api/db-connection' },
  ],
}

在数据库连接中，您可以添加以下内容：

import {
  getOneDocument,
} from '../utils/db-helper'

export default async function (req, res, next) {
  const doc = await getOneDocument('my-one-and-only-collection', req.body)

  res.end(JSON.stringify(doc))
}

然后在asyncData中，您可以执行以下操作：

async asyncData (context: any) {
  const reqq = await axios.post(
    `${url}/db-api`,
    {
      'sys.id': '2J2a1nQhmTYbHML2si8gmW'
    }
  )
  return {
      thatOneAndOnlyRecord: reqq.data,
  }
}

由于您要对mongo的每个查询发出网络请求，因此您还需要确保任何复杂的查询都发生在中间件中。

在nuxt中使用mongodb

2 个答案: