vuex 작업에서 setTimeout을 사용하는 방법

vuex 작업에서 setTimeout을 사용하는 방법

경보 상태를 비우고 경보가 표시되지 않도록 addMovieToFavorites 실행 후 x초 후에 removeAlert 액션을 트리거하거나 removeMovieToFavorites를 실행하는 방법을 잘 모르겠습니다(아래 코드).

alert.displaces

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.media 추가/삭제 경보메시지를 트리거합니다.

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>

추가 및 삭제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액션.

경고 관리가 필요할 수도 있습니다.clearTimeout3초 이내에 여러 경보를 처리할 수 있습니다.기술된 바와 같이 이전 경보가 제거되면 이후 경보가 3초 동안 표시되지 않을 수 있습니다.

언급URL : https://stackoverflow.com/questions/61153703/how-to-use-settimeout-on-vuex-action