为 vuex / nuxtClientInit 创建了钩子？答案

【问题标题】：created hook for vuex / nuxtClientInit?为 vuex / nuxtClientInit 创建了钩子？
【发布时间】：2019-08-23 02:03:55
【问题描述】：

我想知道像nuxtClientInit 这样的最佳方式是什么。我正在尝试尽早在客户端加载身份验证状态并将其保存在我的 vuex 存储中，但不在服务器端。如果 vuex 有类似 created 之类的组件钩子，那就太好了，但据我所知不存在。

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

【问题讨论】：

您可以将其添加到主要的 App.vue created 方法中，或者添加到该方法的基础组件中
@DerekPollard nuxt 中没有 App.vue。

标签： vue.js vuex nuxt.js

【解决方案1】：

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

此选项允许您定义应运行的 JavaScript 插件在实例化根 Vue.js 应用程序之前。

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

您可能需要重新启动您的应用程序才能使其生效，但您随后会在没有任何讨厌的 nuxtServerInit 业务的情况下获取和使用您的身份验证状态。

【讨论】：

谢谢，这似乎是最好的解决方案！