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 (将#修改为@）

javascript netlify-cms nuxt.js vue.js