如何在NuxtJS中从fetch或asyncData钩子访问vuex store？

Question

我想从fetch钩子访问vuex商店，特别是getters。

以下是我在订单页面中使用mapGetters加载的getter。

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

这里是fetch hook的apollo调用，我想提供的是 authUser.id 作为一个变量，由 authUser 从vuex商店获取。

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

如果你的Nuxt版本是>= 2.12。

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

像这样。

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

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

fetch(context)已经被废弃了, 你可以在你的页面中使用匿名的中间件: middleware(context)

Answer 2

使用this.$store for (Nuxt >= 2.12).你应该已经有了一个商店:)