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

Question

我正在为 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 设置。是对的吗？如果是，为什么会这样？我该如何更改？

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

Answer 1

那么，您知道在 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可以坐等结果了。开发工具仍然显示空状态，但我认为这是一个错误，因为我可以在应用程序的其余部分完美地使用商店状态。