有没有办法可以在 nuxt 中更新 api url？答案

【问题标题】：Is there way I can update api url in nuxt?有没有办法可以在 nuxt 中更新 api url？
【发布时间】：2021-11-24 01:39:40
【问题描述】：

我正在尝试制作一个更新 api url 的按钮。

<template>
  <div>
    <div v-for="post in posts">
      <li>{{ post.title }}</li>
    </div>
    <button @click="nextPage">New posts</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
      totalPosts: null,
      postsPerPage: 20,
      pageNumber: 1,
      totalPages: null,
    }
  },
  async fetch() {
    const param = {
      params: {
        _page: this.pageNumber,
        _limit: this.postsPerPage,
      },
    }

    const response = await this.$axios.get(
      'https://jsonplaceholder.typicode.com/posts',
      param
    )

    this.totalPosts = response.headers['x-total-count']
    this.posts = response.data.reverse()
    this.totalPages = this.totalPosts / this.posts
  },
  methods: {
    fetchPost() {
      this.$fetch()
    },
    nextPage() {
      this.pageNumber += 1
    },
    previousPage() {
      this.pageNumber -= 1
    },
  },
  fetchOnServer: false,
}
</script>

在 jsonplaceholder 中，我可以设置页码和帖子限制，例如https://jsonplaceholder.typicode.com/posts?_page=1&_limit=20。所以我尝试制作一个按钮来更新该网址中的页面参数。

但是当我创建 nextPage 方法并将其添加到按钮时，我可以看到 pageNumber 数据正在上升，但没有使用该 pageNumber 重新调用 api。

有没有办法在nuxt中重新调用api或重新渲染？

【问题讨论】：

我想如果你将你的标题更新为“有没有办法我可以更新 nuxt 中的 api url？”它会更好地反映您的问题。

标签： api axios nuxt.js

【解决方案1】：

您的方法 nextPost() 和 previousPost() 仅更新您的 pageNumber。您需要使用更新的参数调用您的方法 fetchPost()。在 youtube 上观看 Debbie O'Brian 的这段视频 - youtube.com/watch?v=qD1Q3nllYRY&t=148s

【讨论】：

【解决方案2】：

您的代码几乎是正确的，但只是稍作修正。

将所有调用移至vue 中的methods 对象内的外部API。不要定义外部的方法对象。
每当您调用外部 API 时，将方法标记为 async，因为 await 只能在 async 函数中使用。
将所有将在 DOM 中使用的变量移至 data 方法。您在数据函数之外定义了fetchOnServer。

现在来谈谈为什么您的代码无法正常工作，这是因为您没有在单击按钮时调用 fetch post 方法。您只增加了页码。那将无济于事。增加页码后，您需要重新调用 fetch 发布方法，以便 nuxtjs 响应式呈现需要的内容。

优化方案

Vue.config.productionTip = false
Vue.config.devtools = false


new Vue({
  el: "#app",
  data() {
    return {
      posts: [],
      totalPosts: null,
      postsPerPage: 20,
      pageNumber: 1,
      totalPages: null,
      fetchOnServer: false,
    }
  },
  methods: {
    async fetchPost() {
      const param = {
        params: {
          _page: this.pageNumber,
          _limit: this.postsPerPage,
        },
      }

      const response = await axios.get('https://jsonplaceholder.typicode.com/posts', param);
      this.totalPosts = response.headers['x-total-count'];
      this.posts = response.data.reverse()
      this.totalPages = this.totalPosts / this.posts
    },
    nextPage() {
      this.pageNumber += 1;
      
      // call the fetchPost function when the button is clicked
      this.fetchPost();
    },
    previousPage() {
      this.pageNumber -= 1;
      
      // call the fetchPost function when the button is clicked
      this.fetchPost();
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="app">
  <template>
  <div>
    <div v-for="post in posts">
      <li>{{ post.title }}</li>
    </div>
    <button @click="nextPage">New posts</button>
    <button @click="previousPage">Previous posts</button>
  </div>
</template>
</div>

【讨论】：