我了解nuxt团队正在开发nuxtClientInit功能,但是在发布之前,您可以自己制作。要了解nuxt在有请求时承担的工作流程,您可以在此处查看其生命周期。这表明首先调用nuxtServerInit,然后再调用中间件。在此中间件调用期间,将提供nuxt.config.js,其中包含您的自定义配置。其中一部分是“插件”,如文档所述,

通过此选项,您可以定义在实例化根Vue.js应用程序之前应运行的JavaScript插件。

因此,如果您编写一个插件来调用存储操作,则可以从那里获取并设置本地存储。因此,从nuxt-client-init插件开始:

//nuxt-client-init.client.js
export default async context => {
  await context.store.dispatch('nuxtClientInit', context)
}

然后将插件添加到nuxt.config.js:

//nuxt.config.js
  plugins: [
    '~/plugins/nuxt-client-init.client.js'
  ],

如果您注意到此处的命名约定,则插件的.client.js部分会告诉nuxt这是仅客户端的插件,并且是简写形式'{ src: '~/plugins/nuxt-client-init.js', mode: 'client' }',因为nuxt 2.4是定义old的方式'{ src: '~/plugins/nuxt-client-init.js', ssr: false }'。无论如何,您现在都可以呼叫商店了,因此您可以采取措施从本地存储器呼叫并设置状态项。

//store/index.js
export const actions = {
  nuxtClientInit({ commit }, { req }) {
    const autho = localStorage.getItem('auth._token.local') //or whatever yours is called
    commit('SET_AUTHO', autho)
    console.log('From nuxtClientInit - '+autho)
  }
}

您可能需要重新启动应用程序才能使它全部生效,但是随后您将获得并使用您的身份验证状态,而无需进行任何麻烦的nuxtServerInit业务。

Logo

前往低代码交流专区

更多推荐