使用 Vuex 的 nuxtServerInit 导致无限循环 laravel 和 nuxtjs答案

【问题标题】：nuxtServerInit with Vuex causes infinite loop laravel and nuxtjs使用 Vuex 的 nuxtServerInit 导致无限循环 laravel 和 nuxtjs
【发布时间】：2021-02-26 10:51:28
【问题描述】：

我尝试在 nuxtjs 前端、laravel 后端项目中使用 nuxtServerInit 运行几个 axios 调用，以便在服务器端调用它们。同时添加这段代码

async nuxtServerInit({commit}) {
  const usercompany = await this.$axios.get('dashboard/getusercompanyfresh');
  console.log(usercompany)
  if(usercompany.data != undefined && usercompany.data !== '') {
    commit('SET_USERCOMPANY', usercompany.data);
  }

 if(usercompany.data != undefined 
    && usercompany.data !== '' 
    && usercompany.data.firstmade != undefined 
    && usercompany.data.firstmade =='candidate'
 ) {
   const processinfo = await this.$axios.get('dashboard/processinfo')
   console.log(processinfo)
   await commit('SET_PROCESSINFO', processinfo.data);
 }

  const response = await this.$axios.get('company/getcache')
  commit('SET_MAINCACHE',response.data);
 
  const themonths = await this.$axios.get('getmonths')
  commit('months', themonths.data);    
  commit('years');
  commit('days');   
});

在我的store/actions.js 中，页面将在 localhost 中加载，但是当我在服务器上构建它时，它会进入无限循环。这些调用的结果是一堆 json 和对象，我可以在 console.log 中看到它们，但在我的服务器中，我看到了这个错误，而不是重复，直到我杀死节点进程

错误

 rabter >  WARN  Cannot stringify arbitrary non-POJOs ClientRequest      x
x                              xx rabter >  ERROR  Maximum call stack size exceeded                       x
x                              xx rabter >   at String.replace (<anonymous>)                              x
x                              xx rabter >   at stringifyPrimitive (node_modules/@nuxt/devalue/dist/deva  x
x                              xx rabter >   at stringify (node_modules/@nuxt/devalue/dist/devalue.cjs.j  x
x                              xx rabter >   at node_modules/@nuxt/devalue/dist/devalue.cjs.js:105:79     x
x                              xx rabter >   at Array.map (<anonymous>)                                   x
x                              xx rabter >   at stringify (node_modules/@nuxt/devalue/dist/devalue.cjs.j  x
x                              xx rabter >   at node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98     x
x                              xx rabter >   at Array.map (<anonymous>)                                   x
x                              xx rabter >   at stringify (node_modules/@nuxt/devalue/dist/devalue.cjs.j  x
x                              xx rabter >   at stringify (node_modules/@nuxt/devalue/dist/devalue.cjs.j

此错误不会出现在本地主机上，并且在那里一切正常我也把它放在了 index.js 中，在那里我导出了我的操作，但仍然是同样的问题感谢您的帮助

【问题讨论】：

是否有任何 axios 请求返回 null data？
你能提供我们所有的商店数据吗？你的状态和突变？

标签： laravel vuex server-side-rendering nuxtjs

【解决方案1】：

我对你的版本做了一些改动，你可以试试这个更新的 nuxtServerInit 函数吗？

  async nuxtServerInit({ commit }, { req }) {
    try {
      return new Promise((resolve, reject) => {
        if (!req) return

        const usercompany = this.$axios.get('dashboard/getusercompanyfresh')
        console.log(usercompany)

        if (usercompany && usercompany.data) {
          commit('SET_USERCOMPANY', usercompany.data)
        }

        if (
          usercompany &&
          usercompany.data &&
          usercompany.data.firstmade &&
          usercompany.data.firstmade === 'candidate'
        ) {
          const processinfo = this.$axios.get('dashboard/processinfo')
          console.log(processinfo)
          commit('SET_PROCESSINFO', processinfo.data)
        }

        const response = this.$axios.get('company/getcache')
        if (response && response.data) {
          commit('SET_MAINCACHE', response.data)
        }

        const themonths = this.$axios.get('getmonths')
        if (themonths && themonths.data) {
          commit('months', themonths.data)
        }
        commit('years')
        commit('days')
        resolve(true)
      })
    } catch (error) {
      console.log(error)
    }
  },

【讨论】：