Как поменять статус отправки во vuex через некоторое время?

Question

[Esm322]

Подскажите, пожалуйста, как можно изменить статус отправки в действиях во vuex через некоторое время с использованием setTimeout?
У меня есть действие по отправки товара:

addProductToCart(context, {
    productId,
    colorId,
    sizeId,
    amount,
  }) {
    context.commit('updateAddLoading', true);
    context.commit('updateAddLoadingFailed', false);
    context.commit('updateisAddLoadingEnded', false);
    return axios.post('*************************', {
      productId: productId,
      colorId: colorId,
      sizeId: sizeId,
      quantity: amount,
    }, {
      params: {
        userAccessKey: context.state.userAccessKey,
      },
    })
      .then((response) => {
        context.commit('updateProductsCartData', response.data.items);
        context.commit('syncProductsCart');
      })
      .catch(() => {
        context.commit('updateAddLoading', false);
        context.commit('updateAddLoadingFailed', true);
      })
      .finally(() => {
        context.commit('updateAddLoading', false);
        context.commit('updateisAddLoadingEnded', true);
      });
  },

Мне необходимо, чтобы 'updateisAddLoadingEnded' поменялся на false, к примеру, через 3 секунды, чтобы убрать блок с информацией о добавлении товара:

<div style="padding-top: 10px;" v-if="isAddLoadingEnded">Товар добавлен в корзину</div>

Пытался прописать setTimeout сразу после того как изменяю 'updateisAddLoadingEnded' на true:

.finally(() => {
        context.commit('updateAddLoading', false);
        context.commit('updateisAddLoadingEnded', true);
        setTimeout(context.commit('updateisAddLoadingEnded', false),  3000);
      });

Но блок просто не появляется тогда

Answer 1

[Алексей Ярков]

Когда вы уже поймёте что такое функция...

-setTimeout(context.commit('updateisAddLoadingEnded', false),  3000);
+setTimeout(() => context.commit('updateisAddLoadingEnded', false),  3000);

Comments

[Esm322]

Спасибо

Answer 2

[Виктор Майоров]

addProductToCart(context, {
    productId,
    colorId,
    sizeId,
    amount,
  }) {
  // Тут наверное не лишним будет доп. проверку повесить, раз setTimeout используете, иначе при повторных запросах у вас могут прошлые setTimeout переводить `updateisAddLoadingEnded` в false
++ if (context.state.updateisAddLoadingEnded) return;
    context.commit('updateAddLoading', true);
    context.commit('updateAddLoadingFailed', false);
    context.commit('updateisAddLoadingEnded', false);
    return axios.post('url', {
      productId: productId,
      colorId: colorId,
      sizeId: sizeId,
      quantity: amount,
    }, {
      params: {
        userAccessKey: context.state.userAccessKey,
      },
    })
      .then((response) => {
        context.commit('updateProductsCartData', response.data.items);
        context.commit('syncProductsCart');
      })
      .catch(() => {
--      context.commit('updateAddLoading', false);
        context.commit('updateAddLoadingFailed', true);
      })
      .finally(() => {
        context.commit('updateAddLoading', false);
        context.commit('updateisAddLoadingEnded', true);
++    setTimeout(() => context.commit('updateisAddLoadingEnded', false),  3000);
      });
  },

Comments

[Esm322]

Спасибо, обошлось только этой строкой

setTimeout(() => context.commit('updateisAddLoadingEnded', false),  3000);

[Виктор Майоров]

Esm322, в catch'e updateAddLoading = false - не нужно, т.к. этот же commit сработает в методе finally