gpt4 book ai didi

javascript - 为什么重新加载有一半时间返回空状态?

转载 作者:行者123 更新时间:2023-11-30 19:41:16 25 4
gpt4 key购买 nike

我正在为 Nuxt 2.5 中的业余项目创建一个网上商店。在 Vuex 商店中,我有一个状态为“currentCart”的模块。在这里,我存储了一个带有 ID 和产品数组的对象。我从后端获取带有 ID 的购物车,该 ID 存储在 cookie 中(使用 js-cookie)。

我使用 nuxtServerInit 从后端获取购物车。然后我将它存储在状态中。然后在组件中,我尝试获取状态并显示购物车中的商品数量,如果购物车为空,则显示“0”。这给出了奇怪的结果。一半的时间它正确地说出有多少产品,但 Vuex 开发工具告诉我购物车是空的。另一半时间显示“0”。

起初我有一个中间件,它在设置购物车的商店中触发一个 Action 。这根本无法始终如一地工作。然后我尝试使用 nuxtServerInit 设置商店,这实际上工作正常。显然我改变了一些东西,因为今天它给出了描述的问题。我找不到它为什么会产生这个问题。

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

setter/getter :

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.logs 放在各处,以检查哪里出错了。 nuxtServerInit 工作,提交“cart/setCart”触发并具有正确的内容。在 setter/getter 中,大多数时候我得到一个空值。如果我在另一次重新加载后快速重新加载页面,我会在 getter 中得到正确的购物车并且组件得到正确的计数。 Vue 开发工具显示 currentCart 状态为 null,即使组件显示了我期望的数据。

我将状态对象更改为“currentCart: {}”,现在它大部分时间都可以工作,但每 3/4 重新加载它就会返回一个空对象。所以很明显,getter 在状态设置之前触发,而状态由 nuxtServerInit 设置。是对的吗?如果是,为什么会这样?我该如何更改?

什么是我不明白?我完全糊涂了。

最佳答案

那么,您知道在 Stackoverflow 上输入要提问的问题的那一刻,提交后您得到了一些新的想法来尝试吗?这是其中之一。

我编辑了问题以告知当我将状态对象更改为空对象时,它有时会返回一个空对象。然后它击中了我,getter 有时会在 nuxtServerInit 之前触发。在文档中指出:

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

我将 nuxtServerInit 更改为:

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

那么现在Nuxt可以坐等结果了。开发工具仍然显示空状态,但我认为这是一个错误,因为我可以在应用程序的其余部分完美地使用商店状态。

关于javascript - 为什么重新加载有一半时间返回空状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55376329/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com