如何解决Nuxt 生成的页面在页面刷新时返回未定义的 VueX 响应
当我决定自己提出这个问题时,我感觉我已经看过互联网上的每一个论坛帖子。我的大脑正在冒烟,所以请耐心等待。
我有一个 Nuxt 项目,可以使用 NetlifyCMS 和 VueX 托管游戏设计师的作品集。我使用 nuxtServerInit() 函数用两种类型的内容填充 VueX 存储:“原型”和“设计文档”。见下图:
export const actions = {
// nuxtServerInit is called by Nuxt.js before server-rendering every page
async nuxtServerInit({ dispatch,getters },{ $content }) {
// Setup store with project data
const types = ['prototypes','design-documents']
let projectList = []
for (const type of types) {
let arr = await $content(type).fetch()
arr.forEach((element) => {
projectList.push(element)
})
}
// Sorted by date completed
projectList.sort((a,b) => (a.date < b.date ? 1 : -1))
await dispatch('projects/setProjectList',projectList,{ root: true })
},}
在我的项目的 index.vue 页面上运行相同的代码,以使用组件的标题填充“项目”组件。
Nuxt 生成功能似乎可以正确地为每个项目(“原型”或“设计文档”)生成一个页面。从主页导航到这些页面时,没有问题。但是,在生产中,当我通过在地址栏中键入这些页面或什至只是在导航到页面后刷新页面来导航到这些页面时,控制台会记录一个错误,指示相应的项目对象未定义。
我应该注意到,我在开发过程中不再遇到这个问题,这使我得出结论,在部署项目之前,我在构建项目之前一定做错了什么(目前我运行 nuxt build
然后运行 nuxt generate
在部署到构建命令为 npm run generate
的 Netlify 之前)。
我确实想知道我的 fetch/VueX 调度代码是否应该在 default.vue 布局文件上完成,以确保在项目呈现的每个页面上都获取内容,但我觉得这可能会导致多个不必要的 fetch 请求。 是否应该在更全局的地方放置此代码,或者我只是在某个地方滑倒了?
非常感谢任何人可能提供的任何支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。