使用 NuxtJS 延迟加载 Vuex 模块答案

【问题标题】：Lazy loading Vuex module with NuxtJS使用 NuxtJS 延迟加载 Vuex 模块
【发布时间】：2019-03-20 07:24:00
【问题描述】：

谁能帮我延迟加载 Vuex 模块？

我哪里做错了？

https://codesandbox.io/s/py197qvxx?fontsize=14

我哪里做错了？

【问题讨论】：

标签： javascript vuejs2 vuex nuxt.js

【解决方案1】：

store.registerModule 不返回承诺，所以没有 then 就可以了。您只需调用它，然后执行您的调度。

您还可以使用 preserveState 选项。阅读本期https://github.com/nuxt/nuxt.js/issues/4370

所以你的代码如下：

  async asyncData({ store, params }) {
    console.log(Users);
    store.registerModule("Users", Users, { preserveState: false });
    await store.dispatch("Users/GET_USER_INFO", params.index);
  },

但是 asyncData 中的代码在客户端或服务器上执行，而不是在两者上执行。因此，在用户页面首次加载时，它将仅在服务器上执行，而在客户端不会注册模块。因此，如果您希望它在服务器端的客户端导航上都可以工作，那么您不能在 asyncData 中执行此操作。像 created hook 这样的东西会更好用

【讨论】：

在客户端浏览或客户端按钮单击工作正常，但在硬刷新或服务器端请求引发错误
是的，正确的一个选项是在 created 钩子中。但是在 asyncData 中做什么 API 调用/调度操作也需要移动到创建的钩子。创建的钩子从服务器/客户端调用了两次正确！是否可以在 fetch 方法中实现这个客户端/服务器端场景模块注册和第一次 API 调用？？
@HardikShah 你不能，因为 fetch 不能在客户端和服务器上都被调用。所以你仍然需要在客户端注册模块。因此，您可以在 beforeCreate 钩子中检查客户端是否已加载模块，如果没有加载它