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

В Vue.js для изменения состояния отправки во Vuex через некоторое время вам потребуется использовать асинхронные операции и таймеры. Вот пошаговая инструкция по достижению этого:

1. Создайте новый модуль Vuex для управления состоянием отправки. Создайте новый файл с именем, например, sendStatus.js, где будет содержаться ваш модуль Vuex.

2. Внутри файла sendStatus.js определите состояние модуля Vuex. Это состояние будет содержать информацию о статусе отправки. Например:

const state = {
  isSending: false
};

3. Определите мутации для изменения состояние отправки. Мутации должны быть синхронными. Например:

const mutations = {
  SET_SENDING_STATUS(state, status) {
    state.isSending = status;
  }
};

4. Определите действия для изменения статуса отправки асинхронно. Внутри действия вы можете использовать setTimeout или другую асинхронную функцию для изменения статуса после заданного времени. Например:

const actions = {
  sendSomething({ commit }) {
    commit('SET_SENDING_STATUS', true);

    // Имитация задержки отправки данных в течение 3 секунд
    setTimeout(() => {
      commit('SET_SENDING_STATUS', false);
    }, 3000);
  }
};

5. Добавьте модуль sendStatus в основный экземпляр Vuex в файле, где у вас находится стор Vuex (обычно это файл с именем store.js). Добавьте его в поле modules:

import Vue from "vue";
import Vuex from "vuex";
import sendStatus from "./sendStatus";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    sendStatus
    // другие модули Vuex, если есть
  }
});

6. Теперь вы можете использовать состояние и действия модуля sendStatus в компонентах Vue. Привязывайте состояние модуля Vuex к своим компонентам и вызывайте действия для изменения состояния отправки. Например:

<template>
  <div>
    <p v-if="isSending">Отправка...</p>
    <button @click="sendData">Отправить</button>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  computed: {
    ...mapState("sendStatus", ["isSending"])
  },
  methods: {
    ...mapActions("sendStatus", ["sendSomething"]),
    sendData() {
      this.sendSomething();
    }
  }
};
</script>

Теперь, когда вы нажимаете кнопку "Отправить", статус отправки будет изменяться на "Отправка..." и через 3 секунды снова станет false, что будет означать, что отправка завершена.

Надеюсь, эта подробная инструкция поможет вам изменить статус отправки через некоторое время во Vuex с использованием Vue.js.