Question

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

如何实现此行为？一种方法是从布局中调用动作，但这是最好的方法吗？

Answer 1

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

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

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

df1
             DateTime Prop_rangeT
1 2016-08-01 08:01:17   0.3636364 # For instance, this is 4/11
2 2016-08-01 09:17:14   0,3565217
3 2016-08-01 10:29:31   0,3773585
4 2016-08-01 11:35:02   0.4174757
5 2016-08-01 12:22:45   0.6018519
6 2016-08-01 13:19:27   0.5200000
7 2016-08-01 14:58:17   0.5918367 # For instance, this is 5.8/9.8
8 2016-08-01 15:30:10   0.5833333

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

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

如果您注意到此处的命名约定，则插件的.client.js部分会告诉nuxt这是仅客户端的插件，并且是//nuxt.config.js plugins: [ '~/plugins/nuxt-client-init.client.js' ],的简写，因为nuxt 2.4是定义旧{{ 1}}。无论如何，您现在都可以拨打商店电话，这样您就可以采取措施从本地存储电话拨打电话并设置状态项。

'{ src: '~/plugins/nuxt-client-init.js', mode: 'client' }'

您可能需要重新启动应用程序才能使其全部生效，但是随后您将获得并使用您的Auth State，而无需进行任何麻烦的nuxtServerInit业务。

为vuex / nuxtClientInit创建了钩子？

1 个答案: