推送新路由时,Nuxt 静态不加载获取的状态

问题描述

我正在使用此处描述的 nuxt 生成完整的静态网络应用https://nuxtjs.org/blog/going-full-static/#crazy-fast-static-applications

我也有一个博客要加载为静态站点,所以我使用 fetch 钩子从 api 加载数据。

async fetch() {
  this.posts = await fetch(`${this.baseApi}/posts`).then(res => res.json())
},

当我生成(npm run generate)时,获取的状态是在dist/assets/static内部正确生成的,所以直接访问/blog时,状态正确加载,数据显示正确。 但是,当我在主页中并使用

访问博客
this.$router.push

一个

<nuxt-link to="/blog">Blog</nuxt-link>

获取的状态没有被加载,我必须再次调用 api,或者在 this.$fetch() 钩子中再调用一次 mounted()

我已经添加

watch: {
  '$route.query': '$fetch'
}

进入首页

我需要在使用导航时正确加载获取的状态我还缺少什么?

澄清

我没有遇到 fetch 钩子本身的任何问题,而是导航没有检索目标路线的状态。 甚至 HTML 也在那里 我需要页面获取目标路由的状态,当路由改变时,因为vue模板依赖它,所以如果没有加载,ui不会显示任何东西,我被迫调用fetch钩子手动

为了更清晰,这是我在直接访问 /blog 时的 devtools 的屏幕截图,注意 state.js 是如何正确检索的(它包含所有呈现的内容

State correctly fetched when directly accessing

下面是我的 devtools 访问 / 时的截图,然后使用 nuxt-link 或 this.$router.push 访问博客(结果相同)

State not fetched after navigation

静态截图:

Static state.js of /blog

Blog.vue

<template>
  <b-container class="container blog">
    <b-row>
      <b-col lg="12" md="12" sm="12" cols="12" class="logo-col">
        <SblogoSingle />
      </b-col>
    </b-row>
    <b-row v-if="$fetchState.pending" class="text-center">
      <b-spinner style="margin: auto"></b-spinner>
    </b-row>
    <b-row v-else>
      <b-col
        v-for="(post,idx) in posts.data"
        :key="idx"
        lg="4"
        md="4"
        sm="6"
        cols="12"
        class="blog-post-col"
      >
        <b-card
          v-if="post !== undefined"
          no-body
          class="shadow-lg blog-post-card"
          :img-src="post.media.url"
          img-top
        >
          <b-card-body class="text-left">
            <b-card-title>{{ replaceSlugByString(post.slug) }}</b-card-title>
            <b-card-text
              class="post-short-description"
              v-html="post.localizations[0].shortDescription"
            ></b-card-text>
          </b-card-body>
          <template #footer>
            <div class="text-left">
              <b-button class="apply-btn read-more-btn" @click="openBlogPost(idx)">Read more</b-button>
            </div>
          </template>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      slug: 'test',posts: {},currentPage: 1,perPage: 12,pageIndex: 1,totalPages: 1,}
  },async fetch() {
    const response = await fetch(`${this.baseApi}/StaticPage`)
    const fetchedPosts = await response.json()

    this.posts = fetchedPosts
    // this.posts = await fetch(`${this.baseApi}/StaticPage`).then(res =>res.json())
  },computed: {
    ...mapState('modules/settings',['baseApi']),},beforeMount() {
    this.$fetch() // i want to remove this because the pages are statically generated correctly,I'm only adding it to refresh the state. which can be retrieved as a separate js file when accessing the route directly
  },methods: {
    openBlogPost(idx) {
      const pageObject = this.posts.data[idx]
      this.$router.push({
        name: `blog-slug`,params: {
          slug: pageObject.slug,page: pageObject,})
    },replaceSlugByString(slug) {
      return slug.replaceAll('-',' ')
    },}
</script>

这里是 slug.vue 的 pastebin

https://pastebin.com/DmJa9Mm1

解决方法

编辑:

  • fetch() 钩子效果很好,即使你第一次来到这个特定的页面,它也会被触发
  • Vue devtools 可以帮助您查明某些状态是否缺失或行为异常。
  • 没有静态文件夹中的状态这样的东西,因为状态根本不是静态变量或事物,它是动态的,仅在运行时可用。
  • 此答案可能会帮助您查看 JSONplaceholder 的工作示例(带有列表 + 详细信息页面):How to have list + details pages based on API fetched content

尽量不要混用 async/awaitthen
所以,这种语法应该更适合。

async fetch() {
  const response = await fetch(`${this.baseApi}/posts`)
  const fetchedPosts = await response.json()
  console.log('posts',fetchedPosts)
  this.posts = fetchedPosts
},

然后,您可以使用 devtools 的网络选项卡进行调试,看看它是否被触发。不过我觉得那应该没问题。


我刚刚写的更深入的这个答案也有助于更多地理解 fetch() 钩子:https://stackoverflow.com/a/67862314/8816585

,

当使用 nuxt generate 生成带有 nuxt 的静态网站时,您使用 fetch 钩子加载一次数据,并且永远不必在您的网站中再次加载它。

你可能会遇到这样的情况,你有一个正确生成的 html 页面,但数据为空,即使你可以看到 html 源中的内容,而空数据导致 UI 无法加载,并迫使你重新-点击 api(或手动调用 $fetch 钩子),重新加载您的状态(和您的 UI)

在这种情况下,将您的数据移动到商店,在我的情况下,我创建了一个新的 store/modules/blog.js 文件:

export const state = () => ({
   posts:[]
})
export const mutations = {
   SET_POSTS(state,posts) {
       state.posts = posts
   }
}

然后将您的 fetch 钩子修改为:

async fetch() {
    const response = await this.$axios.$get(`${this.baseApi}/posts`)
    this.$store.commit("modules/blog/SET_POSTS",response)
}

你可以丢弃 this.$axios,使用 fetch 没有关系。

然后,在您运行 npm run generate 后,查看您的 dist/assets/static/<someid>/state.js,您会在其中找到主页的所有状态(我的主页不包括博客文章),所以我阅读了modules:{blog:{posts:[]}... 空数组

转到您的 dist/assets/static/<someid>/blog/state.js,您应该会在 modules:{blog:{posts:{success:am,code:an ... 处找到从 api 加载的所有帖子 还有一个dist/assets/static/<someid>/blog/payload.js

现在,当您访问主页时,博客的 payload.js 将在 <nuxt-link to='/blog'> 可见时获取,并且您的状态将使用已获取的数据进行更新

现在,如果您直接访问 /blog,将在获取 state.js 之前检索 payload.js,并且您的状态将是最新的

这就是您在不使用 API 的情况下创建小型静态博客的方式。希望这会有所帮助。