Как использовать setTimeout для действия vuex? - PullRequest
Новая
       74

Как использовать setTimeout для действия vuex?

1 голос
/ 11 апреля 2020

Я хотел бы очистить состояние предупреждения, чтобы предупреждение не отображалось, я не знаю, как вызвать действие removeAlert через x секунд после выполнения addMovieToFavourites или removeMovieToFavourites, код ниже, спасибо.

alert. js

const state = {
  alert: null
}
const mutations = {
  SET_ALERT(state, alert) {
    state.alert = alert
  },

  REMOVE_ALERT(state) {
    state.alert = null
  }
}
const actions = {
  setAlert({ commit }, alert) {
    commit('SET_ALERT', alert)
  },
  removeAlert({ commit }) {
    commit('REMOVE_ALERT')
  }
}

media. js при добавлении / удалении запускается предупреждение 

const actions = {
  addMovieToFavourites({ commit, dispatch }, movie) {
    commit('ADD_FAVOURITE', movie)
    const alert = {
      type: 'success',
      message: 'Added to favourites!'
    }
    dispatch('alert/setAlert', alert, { root: true })
  },
  removeMovieFromFavourites({ commit, dispatch }, movie) {
    commit('REMOVE_FAVOURITE', movie)
    const alert = {
      type: 'success',
      message: 'Removed from favourites!'
    }
    dispatch('alert/setAlert', alert, { root: true })
  },
}

alert. vue

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Alert',
  data() {
    return {
      timeout: null
    }
  },
  mounted() {
    this.timeout = setTimeout(() => this.removeAlert(), 3000)
  },

  beforeDestroy() {
    clearTimeout(this.timeout)
  },
  computed: {
    alertTypeClass() {
      return `alert-${this.alert.type}`
    },

    ...mapState('alert', ['alert'])
  },

  methods: mapActions('alert', ['removeAlert'])
}
</script>

1 Ответ

2 голосов
/ 11 апреля 2020

Добавьте и удалите его из действий media: 

addMovieToFavourites({ commit, dispatch }, movie) {
  commit('ADD_FAVOURITE', movie)
  const alert = {
    type: 'success',
    message: 'Added to favourites!'
  }

  // Add alert
  dispatch('alert/setAlert', alert, { root: true })

  // Remove alert
  setTimeout(() => {
    dispatch('alert/removeAlert', { root: true })
  }, 3000)
}

Если все предупреждения работают таким образом, вы можете автоматически инициировать удаление из каждого предупреждения, поставив его в очередь в действии setAlert: 

const actions = {
  setAlert({ commit }, alert) {
    commit('SET_ALERT', alert);
    setTimeout(() => {
      commit('REMOVE_ALERT');
    }, 3000);
  },
  ...
}

Тогда вам не понадобится действие removeAlert.

Вам также может понадобиться управление предупреждениями или clearTimeout для обработки нескольких предупреждений в течение 3 секунд. Как написано, удаление предыдущего предупреждения может означать, что более позднее предупреждение не будет отображаться в течение полных 3 секунд.

...