问题描述
我正在使用此处描述的 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 是如何正确检索的(它包含所有呈现的内容)
下面是我的 devtools 访问 / 时的截图,然后使用 nuxt-link 或 this.$router.push 访问博客(结果相同)
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
解决方法
编辑:
-
fetch()
钩子效果很好,即使你第一次来到这个特定的页面,它也会被触发 - Vue devtools 可以帮助您查明某些状态是否缺失或行为异常。
- 没有静态文件夹中的状态这样的东西,因为状态根本不是静态变量或事物,它是动态的,仅在运行时可用。
- 此答案可能会帮助您查看 JSONplaceholder 的工作示例(带有列表 + 详细信息页面):How to have list + details pages based on API fetched content
尽量不要混用 async/await
和 then
。
所以,这种语法应该更适合。
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 的情况下创建小型静态博客的方式。希望这会有所帮助。