CODEWITHSUNDEEP
vue.jsnuxt.jsserver-side-rendering
Fozle Rabbi Shafi
Fozle Rabbi Shafi

Reputation: 753

How to access vuex store from fetch or asyncData hook in NuxtJS?

I want to access vuex store specifically getters from fetch hook.

Here is my getters I'm loading using mapGetters inside order page

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

Here is apollo call from fetch hook and I'm trying to provide authUser.id as a variable which is provided by authUser getter from vuex store.

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);
  },

But, it fails to load the authUser from the store in initial page load.

I am curious to know If my steps are correct or not. If this is not correct what are the other alternatives that can I follow?

Upvotes: 2

Views: 6908

Answers (2)

amine nour
amine nour

Reputation: 21

use this.$store for (Nuxt >= 2.12). you should already have a store :)

Upvotes: 2

BigWhite
BigWhite

Reputation: 39

If your Nuxt version is >= 2.12

maybe you can try to use anonymous middleware to get context

like this: 

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

In document https://nuxtjs.org/api/pages-fetch/ says:

fetch(context) has been deprecated, instead you can use an anonymous middleware in your page: middleware(context)

Upvotes: 1

Related Questions