Question

我一直在向Vue / Nuxt介绍自己，并开始尝试API。我正在尝试将NuxtServerInit函数中的逻辑移至API。

  nuxtServerInit(vuexContext, context) {
    return context.app.$axios
      .$get(process.env.baseUrl + "/posts.json")
      .then(data => {
        const postsArray = [];
        for (const key in data) {
          postsArray.push({ ...data[key], id: key });
        }
        vuexContext.commit("modules/modPost/setPosts", postsArray);
      })
      .catch(e => context.error(e));
  }

我遇到的问题是访问上下文以进行数据库调用。

API看起来像这样：

const { Router } = require("express");
const glob = require("glob");
const router = Router();

router.post("/carousel/posts", async function(req, res) {
  return context.app.axios
    .get(process.env.baseUrl + "/posts.json")
    .then(data => {
      const postsArray = [];
      for (const key in data) {
        postsArray.push({ ...data[key], id: key });
      }
      vuexContext.commit("modules/modPost/setPosts", postsArray);
    })
    .catch(e => context.error(e));
});

module.exports = router;

我试图发出POST请求，以为可以将上下文作为参数发送，但我感觉不对...

   async asyncData({ $axios }) {
    const ps = await $axios.$post(
      "http://localhost:3000/api/carousel/posts", {context});
    return { ps };
  }

我应该在这里注意，我相当确定在API中，该行是错误的：

vuexContext.commit("modules/modPost/setPosts", postsArray);

我相信它通常会在API返回的异步数据中执行。

总而言之，我有两个问题。

我要努力做到的合理吗？
完成我想做的事情我缺少什么？

谢谢！

Answer 1

首先，我在这里看到糟糕的工作流程。我建议您分析Express和Nuxt之间的通信情况。看看这个auth example

vuexContext.commit 是vuex方法，您在服务器端（快速）使用它，这是一个错误。简而言之，沟通可能像这样：

客户端请求服务器/调用vuex操作
服务器（以您的情况为准）使用数据CRUD进行处理，然后返回响应
vuex操作收到服务器的响应，提交更改
vue / nuxt渲染更改

Answer 2

我不敢相信我在发布后的十分钟内就解决了。 gh。

对于数字2，将其添加到API：

router.post("/carousel/posts", async function(req, res) {
  const darts = await axios.get(process.env.baseUrl + "/posts.json");
  return res.json(darts.data);
});

和asyncData：

 async asyncData({ $axios, store }) {
    //console.log($axios);
    const ps = await $axios.$post(
      "http://localhost:3000/api/carousel/posts"
    );

    const postsArray = [];
    for (const key in ps) {
      postsArray.push({ ...ps[key], id: key });
    }
    store.commit("modules/modPost/setPosts", postsArray);
    return { ps };
  }

还对合理性/最佳实践/意见感兴趣...

如何通过Nuxt / Vue中的API进行数据库调用

2 个答案: