有什么办法可以在 nuxt 中更新 api url 吗？

Question

我正在尝试制作一个按钮来更新 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 中，我可以设置页码和 post 限制，例如 https://jsonplaceholder.typicode.com/posts?_page=1&_limit=20。所以我尝试制作一个按钮来更新 url.

中的页面参数

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

有什么方法可以在 nuxt 中重新调用 api 或重新渲染？

Answer 1

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

Answer 2

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

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

现在说明为什么您的代码无法正常工作，这是因为您没有在单击按钮时调用 fetch post 方法。您只增加了页码。那无济于事。页码增加后，您需要重新调用 fetch posts 方法，以便 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>

有什么办法可以在 nuxt 中更新 api url 吗？

Is there way I can update api url in nuxt?

api

axios

nuxt.js

优化方案