Question

我在ssr模式下开发了Nuxt应用程序。

当我使用中间件在ctx上设置isMobile属性时，我希望能够在布局中访问它。

问题是我认为nuxtServerInit在中间件之前执行，所以我不能将值提交给vue存储。

这是我使用的在ctx上设置isMobile的中间件：

export default function (ctx) {
   const userAgent = ctx.req ? ctx.req.headers['user-agent'] : navigator.userAgent
   ctx.isMobile = /mobile/i.test(userAgent)
}

这就是我尝试捕获该信息的方式：

export const actions = {
   nuxtServerInit ({ dispatch }, ctx) {
      dispatch('app/setIsMobile', ctx.isMobile) // ctx.isMobile is always undefined
   }
}

有什么想法如何使用布局中的属性访问ctx？

Answer 1

我找到了一种方法，只需从中间件分派存储即可：

export default function ({ store, req }) {
   const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
   const isMobile = /mobile/i.test(userAgent)
   dispatch('app/setIsMobile', isMobile)
}

在Nuxt应用程序中的布局中访问ctx属性

1 个答案: