如何从 NuxtJS 中的 fetch 或 asyncData 挂钩访问 vuex 存储？答案

【问题标题】：How to access vuex store from fetch or asyncData hook in NuxtJS?如何从 NuxtJS 中的 fetch 或 asyncData 挂钩访问 vuex 存储？
【发布时间】：2020-08-17 00:20:41
【问题描述】：

我想从 fetch 挂钩访问 vuex 商店，特别是 getter。

这是我在订单页面中使用 mapGetters 加载的吸气剂

computed: {
    ...mapGetters("auth", ["authUser"])
  },

这是来自 fetch 钩子的 apollo 调用，我正在尝试提供 authUser.id 作为变量，该变量由 vuex 商店中的 authUser getter 提供。

async fetch() {
    console.log("fetch order is called");
    const orderInput = {
      userId: this.authUser.id,
      orderStatus: "PENDING"
    };

    const response = await this.$apollo.query({
      query: getOrdersByUserIdQuery,
      variables: { orderInput }
    });

    this.orders = response.data.getOrderByUserId.orders;
    console.log("getOrderResponse", response);
  },

但是，在初始页面加载时，它无法从商店加载 authUser。

我很想知道我的步骤是否正确。如果这不正确，我可以遵循哪些其他替代方案？

【问题讨论】：

为什么这不是一个数组？ ...mapGetters(["auth","authUser"])
您还需要显示您在哪里触发了在您的商店中设置authUser 的事件。
@kiddorails authUser 是用户登录成功后保存的对象。它不是数组，它是 vuex 存储的 auth 模块中已经可用的对象
知道了。我不知道命名空间的概念。只需阅读。
@kiddorails 非常感谢。对不起，我的误解。您对我的问题有任何解决方案吗？我被困在这个问题的阶段。

标签： vue.js nuxt.js server-side-rendering

【解决方案1】：

将 this.$store 用于 (Nuxt >= 2.12)。你应该已经有一家商店了:)

【讨论】：

【解决方案2】：

如果您的 Nuxt 版本 >= 2.12

也许你可以尝试使用匿名中间件来获取上下文

像这样：

async middleware({ store }) {
    await store.dispatch('one/fetchSomething')
  },

在文件https://nuxtjs.org/api/pages-fetch/ 中说：

fetch(context) 已被弃用，您可以在页面中使用匿名中间件：middleware(context)

【讨论】：