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

Question

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?

why isn't this a single array? ...mapGetters(["auth","authUser"]) — kiddorails
– kiddorails, Commented May 2, 2020 at 15:09
also you will need to show where you are triggering the event which sets the authUser in your store. — kiddorails
– kiddorails, Commented May 2, 2020 at 15:10
@kiddorails authUser is an object that is saved after successful user login. It is not an array, it is an object already available in auth module of the vuex store — Fozle Rabbi Shafi
– Fozle Rabbi Shafi, Commented May 2, 2020 at 16:25
@kiddorails Thanks a lot. Sorry for my misunderstanding. Do you have any solution regarding my question? I am stuck at a stage for this issue. — Fozle Rabbi Shafi
– Fozle Rabbi Shafi, Commented May 2, 2020 at 17:29

amine nour · Accepted Answer · 2020-05-31 22:57:53Z

2

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

answered May 31, 2020 at 22:57

amine nour

211 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BigWhite · Accepted Answer · 2020-05-06 05:48:28Z

1

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)

answered May 6, 2020 at 5:48

BigWhite

394 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related