我正在Nuxt 2.5中为一个兴趣项目创建一个Web商店。在Vuex store中,我有一个名为 "currentCart" 的模块,其中存储了一个带有ID和产品数组的对象。我使用js-cookie将后端返回的购物车ID存储在cookie中。
我使用nuxtServerInit从后端获取购物车,然后将其存储在state中。在组件中,我尝试获取state,并显示购物车中商品的数量,如果购物车为空,则显示“0”。这会产生奇怪的结果。有一半的时间它会正确地显示有多少个产品,但Vuex dev工具告诉我cart为null。另一半时间它显示“0”。
起初,我使用middleware触发store中的一个action来设置购物车。这完全不起作用。然后我尝试使用nuxtServerInit来设置store,这实际上是可行的。显然我更改了某些东西,因为今天它出现了所描述的问题。我找不到原因造成此问题。
nuxtServerInit:
变异:
获取器:
在cart.vue文件中:
状态对象:
我在各个地方都加入了console.log,以检查哪里出了问题。nuxtServerInit工作正常,提交“cart/setCart”成功并具有正确的内容。在getter中,大多数情况下我得到一个null。如果我快速重新加载页面,那么在getter中我会得到正确的购物车,并且组件会得到正确的计数器。Vue dev tool显示当前购物车状态为null,即使组件显示我预期的数据。
我将状态对象更改为“currentCart:{}”,现在它大部分时间都能正常工作,但每3/4次重新加载时都会返回一个空对象。因此,显然getter在状态设置之前触发,而状态是由nuxtServerInit设置的。是这样吗?如果是,为什么会这样,并且我该如何更改它?
我没有理解的是什么?我完全困惑了。
我使用nuxtServerInit从后端获取购物车,然后将其存储在state中。在组件中,我尝试获取state,并显示购物车中商品的数量,如果购物车为空,则显示“0”。这会产生奇怪的结果。有一半的时间它会正确地显示有多少个产品,但Vuex dev工具告诉我cart为null。另一半时间它显示“0”。
起初,我使用middleware触发store中的一个action来设置购物车。这完全不起作用。然后我尝试使用nuxtServerInit来设置store,这实际上是可行的。显然我更改了某些东西,因为今天它出现了所描述的问题。我找不到原因造成此问题。
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");
}
},
变异:
setCart(state, cart) {
state.currentCart = cart;
}
获取器:
currentCart(state) {
return state.currentCart;
}
在cart.vue文件中:
if(this.$store.getters['cart/currentCart'])
return this.$store.getters['cart/currentCart'].products.length;
else
return 0;
状态对象:
const state = () => ({
currentCart: null,
});
我在各个地方都加入了console.log,以检查哪里出了问题。nuxtServerInit工作正常,提交“cart/setCart”成功并具有正确的内容。在getter中,大多数情况下我得到一个null。如果我快速重新加载页面,那么在getter中我会得到正确的购物车,并且组件会得到正确的计数器。Vue dev tool显示当前购物车状态为null,即使组件显示我预期的数据。
我将状态对象更改为“currentCart:{}”,现在它大部分时间都能正常工作,但每3/4次重新加载时都会返回一个空对象。因此,显然getter在状态设置之前触发,而状态是由nuxtServerInit设置的。是这样吗?如果是,为什么会这样,并且我该如何更改它?
我没有理解的是什么?我完全困惑了。