Nuxt 重新加载 api 数据失败

Question

在解决重新加载问题时需要一些帮助。 我通过服务获取数据：

import axios from 'axios'

const apiClient = axios.create({
 baseURL: 'www.domain/api/v1',
 headers: {
 Accept: 'application/json',
 'Content-Type': 'application/json'
 }
})

和

export default {
 getCompanies() {
return apiClient.get('/companies')
},

店内：

export const actions = {
 fetchCompanies({ commit }) {
 return CompanyService.getCompanies().then(response => {
  commit('SET_COMPANIES', response.data)
 })
},

在页面/公司中：

async fetch({ store, error }) {
  try {
    await store.dispatch('company/fetchCompanies')
  } catch (e) {
    error({
      statusCode: 503,
      message: 'Unable to fetch Companies at this time'
    })
  }
},

工作正常，但页面重新加载时没有数据。 一些帮助会很棒。

Answer 1

如果您在分页组件上使用它，它不重新加载的原因是 fetch 它将在服务器端调用一次，并且在导航到更多路由时在客户端调用。

默认情况下，查询字符串更改时不会调用 fetch 方法。如果您想更改此行为，例如在构建分页组件时，您可以设置应通过页面组件的 watchQuery 属性监听的参数。在 API watchQuery 页面上了解更多信息。

看起来 Nuxt 文档：https://nuxtjs.org/api/pages-fetch/

您可以使用watchQuery 来解决此问题。 https://nuxtjs.org/api/pages-watchquery