Nuxt Fetch 在首次加载时不更新答案

【问题标题】：Nuxt Fetch Doesn't Update on First LoadNuxt Fetch 在首次加载时不更新
【发布时间】：2020-07-23 21:49:40
【问题描述】：

我遇到以下问题，希望有人可以帮助我：

Fetch 在第一次加载时不起作用（也不是在重新加载时）。它仅在客户端（当我在路由之间移动时）有效。

我读过 watchQuery 可以提供帮助，但不明白为什么以及如何使用它。

<script>
export default {
  async fetch() {
    const userId = await this.$nuxt.context.store.state.auth.authUser.userId
    await this.$store.dispatch('case/fetchMyCases', userId.uid)
    await this.$store.dispatch('case/fetchMyPendingCases', userId.uid)
...

即使我直接导入和使用 firebase/auth 也不起作用。

<script>
import * as firebase from 'firebase/app'
import 'firebase/auth'
export default {
  async fetch() {
    const userId = await firebase.auth().currentUser
    await this.$store.dispatch('case/fetchMyCases', userId.uid)
    await this.$store.dispatch('case/fetchMyPendingCases', userId.uid)
...

有人对此有什么建议吗？我真的很感激。

谢谢！

【问题讨论】：

你是在通用模式下使用nuxt，还是没有？
是的，我使用的是通用模式。

标签： vue.js nuxt.js

【解决方案1】：

经过 3 天的搜索/测试，我终于找到了我遇到此问题的原因。

问题是我只是将 async/await 用于获取，但没有将 async/await 用于操作本身。因此，我的 getter（在计算中）在调度完成之前获取存储状态。

谢谢大家！

【讨论】：

【解决方案2】：

警告：您没有可以通过这个内部 fetch 访问组件实例，因为它在启动组件（服务器- 边）。

async fetch({ store }) {
  await store.dispatch('case/fetchMyCases')
  await store.dispatch('case/fetchMyPendingCases')
}

如果需要参数：

async fetch({ store, params }) {
  await store.dispatch('case/fetchMyCases', params.uid)
  await store.dispatch('case/fetchMyPendingCases', params.uid)
}

我举了一个 id 的例子。参数名称取决于您的页面名称。

_id => params.id
_uid => params.uid
_slug => params.slug
...

【讨论】：

不幸的是，它不起作用，我也不想使用旧版本的 fetch（带上下文）。非常感谢您的回复！

【解决方案3】：

是的，您必须将 async/await 放在操作上。

async 自动返回一个promise

如果您不需要该值，在这种情况下，不要返回任何内容。

export const Actions = {
  async fetchUsers() {
     // It will return automatically promise
     await this.$axios.get('API')
  }
}

// If you need returne value
// First way
export const Actions = {
  async fetchUsers() {
   // It will return promise and value
   return await this.$axios.get('API')
  }
}

// Second way
export const Actions = {
  async fetchUsers() {
   // It will return promise and value
   const response = await this.$axios.get('API')
   return response;
 }

}

【讨论】：