Styjun

I'm creating a webshop for a hobby project in Nuxt 2.5. In the Vuex store I have a module with a state "currentCart". In here I store an object with an ID and an array of products. I get the cart from the backend with an ID, which is stored in a cookie (with js-cookie).

I use nuxtServerInit to get the cart from the backend. Then I store it in the state. Then in the component, I try to get the state and display the number of articles in the cart, if the cart is null, I display "0". This gives weird results. Half of the time it says correctly how many products there are, but the Vuex dev tools tells me the cart is null. The other half of the time it displays "0".

At first I had a middleware which fired an action in the store which set the cart. This didn't work consistently at all. Then I tried to set the store with nuxtServerInit, which actually worked right. Apparently I changed something, because today it gives the descibed problem. I can't find out why it produces this problem.

The nuxtServerInit:

nuxtServerInit ( commit , req ) 
 let cartCookie;

 // Check if there's a cookie available
 if(req.headers.cookie) 

 cartCookie = req.headers.cookie
 .split(";")
 .find(c => c.trim().startsWith("Cart="));

 // Check if there's a cookie for the cart
 if(cartCookie)
 cartCookie = cartCookie.split("=");
 else
 cartCookie = null;
 
 // Check if the cart cookie is set
 if(cartCookie) 

 // Check if the cart cookie isn't empty
 if(cartCookie[1] != 'undefined') 
 let cartId = cartCookie[1];

 // Get the cart from the backend
 this.$axios.get(`$api/$cartId`)
 .then((response) => 
 let cart = response.data;
 // Set the cart in the state
 commit("cart/setCart", cart);
 );
 
 
 else 
 // Clear the cart in the state
 commit("cart/clearCart");
 
,

The mutation:

setCart(state, cart) 
 state.currentCart = cart;

The getter:

currentCart(state) 
 return state.currentCart;

In cart.vue:

if(this.$store.getters['cart/currentCart'])
 return this.$store.getters['cart/currentCart'].products.length;
else
 return 0;

The state object:

const state = () => (
 currentCart: null,
);

I put console.logs everywhere, to check where it goes wrong. The nuxtServerInit works, the commit "cart/setCart" fires and has the right content. In the getter, most of the time I get a null. If I reload the page quickly after another reload, I get the right cart in the getter and the component got the right count. The Vue dev tool says the currentCart state is null, even if the component displays the data I expect.

I changed the state object to "currentCart: " and now it works most of the time, but every 3/4 reloads it returns an empty object. So apparently the getter fires before the state is set, while the state is set by nuxtServerInit. Is that right? If so, why is that and how do I change it?

What is it I fail to understand? I'm totally confused.

So, you know that moment you typed out the problem to ask on Stackoverflow and after submitting you got some new ideas to try out? This was one of them.

I edited the question to tell when I changed the state object to an empty object, it sometimes returned an empty object. Then it hit me, the getter is sometimes firing before the nuxtServerInit. In the documentation it states:

Note: Asynchronous nuxtServerInit actions must return a Promise or leverage async/await to allow the nuxt server to wait on them.

I changed nuxtServerInit to this:

async nuxtServerInit ( commit , req ) {
 ...
 await this.$axios.get(`$api/$cartId`)
 .then((response) => 
 ...
 
 await commit("cart/clearCart");

So now Nuxt can wait for the results. The Dev Tools still show an empty state, but I think that is a bug, since I can use the store state perfectly fine in the rest of the app.