vue.js - 为 vuex/nuxtClientInit 创建了钩子(Hook)？

Question

我想知道执行类似nuxtClientInit 的最佳方法是什么。我正在尝试尽早在客户端加载 Auth State 并将其保存在我的 vuex 存储中，而不是在服务器端。如果 vuex 有类似组件的 created Hook ，那会很棒，但据我所知这并不存在。

我怎样才能实现这种行为？一种方法可能是从布局调用操作，但这是最好的方法吗？

Answer 1

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

This option lets you define JavaScript plugins that should be run before instantiating the root Vue.js application.

因此，如果您编写一个插件来调用存储操作，您就可以从那里获取和设置本地存储。所以，从一个 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 是定义旧 '{ 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)
  }
}

您可能需要重新启动您的应用才能使所有这些生效，但您随后将获得并使用您的 Auth 状态，而无需任何讨厌的 nuxtServerInit 业务。