vue.js - 如何从 NuxtJS 中的 fetch 或 asyncData 钩子(Hook)访问 vuex 存储？

Question

我想从 fetch hook 访问 vuex 存储，特别是 getter。

这是我正在订单页面内使用 mapGetters 加载的 getter

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

这是来自 fetch hook 的 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。

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

Answer 1

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