Question

我想从中间件运行后从ssr服务器传递一些额外的数据，并在客户端中间件上使用它们。有点类似于nuxt对vuex所做的工作。

Documentation在render:context钩上：

每次在服务器上渲染路线时，都会在render：route挂钩之前。在将Nuxt上下文序列化到window .__ NUXT__之前调用，用于添加一些可在客户端获取的数据。

现在我的自定义插件定义了一些挂钩，如文档中所述，但似乎并非所有挂钩都被正确调用：

module.exports = function() {
  this.nuxt.hook('render:route', (url, result, context) => {
    console.log('This one is called on every server side rendering')
  }

  this.nuxt.hook('renderer', renderer => {
    console.log('This is never called')
  }

  this.nuxt.hook('render:context', context => {
    console.log('This is only called once, when it starts loading the module')
  }
}

我在做错什么，如何将自定义ssr数据传递到客户端渲染器？

Answer 1

好吧，刚刚找到了解决以下核心问题的解决方案：将自定义数据从（ssr）服务器传递到客户端：

创建插件：plugins/my-plugin.js

export default ({ beforeNuxtRender, nuxtState }) => {
  if (process.server) {
    beforeNuxtRender(({ nuxtState }) => {
      nuxtState.myCustomData = true
    })
  } else {
    console.log('My cystom data on the client side:', nuxtState.myCustomData)
  }
}

然后在nuxt.config.js中注册插件：

module.exports = {
  plugins: ['~/plugins/my-plugin']
}

文档here。

Nuxt自定义模块挂钩未调用

1 个答案: