Почему перезагрузка возвращает пустое состояние половину времени? - PullRequest
Новая
       12

Почему перезагрузка возвращает пустое состояние половину времени?

1 голос
/ 27 марта 2019

Я создаю интернет-магазин для хобби-проекта в Nuxt 2.5. В магазине Vuex у меня есть модуль с состоянием "currentCart". Здесь я храню объект с идентификатором и массивом продуктов. Я получаю корзину из бэкэнда с идентификатором, который хранится в куки (с js-cookie).

Я использую nuxtServerInit, чтобы получить корзину из бэкэнда. Затем я храню его в состоянии. Затем в компоненте я пытаюсь получить состояние и отобразить количество товаров в корзине; если корзина пуста, я отображаю «0». Это дает странные результаты. В половине случаев он правильно говорит, сколько продуктов, но инструменты Vuex dev говорят мне, что корзина пуста. В другой половине времени отображается «0».

Сначала у меня было промежуточное программное обеспечение, которое запускало действие в магазине, которое устанавливало корзину. Это не работает последовательно на всех. Затем я попытался установить магазин с 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;
}

Получатель: 

currentCart(state) {
  return state.currentCart;
}

В корзине.вю: 

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" срабатывает и имеет правильный контент. В геттере большую часть времени я получаю ноль. Если я быстро перезагружаю страницу после следующей перезагрузки, я получаю правильную корзину в получателе, и компонент получает правильное количество. Инструмент Vue dev сообщает, что состояние currentCart равно нулю, даже если компонент отображает ожидаемые данные.

Я изменил объект состояния на «currentCart: {}», и теперь он работает большую часть времени, но каждые 3/4 перезагрузки он возвращает пустой объект. Таким образом, очевидно, геттер срабатывает до того, как состояние установлено, в то время как состояние устанавливается nuxtServerInit. Это правильно? Если да, то почему и как я могу это изменить?

Что я не понимаю? Я в полном замешательстве.

1 Ответ

1 голос
/ 27 марта 2019

Итак, вы знаете, что в тот момент, когда вы печатали задачу, задавая вопрос в Stackoverflow, и после отправки у вас появилось несколько новых идей для опробования?Это был один из них.

Я отредактировал вопрос, чтобы сказать, когда я изменял объект состояния на пустой объект, он иногда возвращал пустой объект.Затем он ударил меня, геттер иногда запускается перед nuxtServerInit.В документации говорится:

Примечание. Асинхронные действия nuxtServerInit должны возвращать Promise или использовать async / await, чтобы позволить серверу nuxt ожидать их.

Я изменилnuxtServerInit к этому: 

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

Так что теперь Nuxt может ждать результатов.Инструменты разработки по-прежнему показывают пустое состояние, но я думаю, что это ошибка, поскольку я могу прекрасно использовать состояние хранилища в остальной части приложения.

...