Vue.js 如何在vuex操作上使用setTimeout？

我想清空警报状态，这样警报就不会显示，我真的不知道如何在AddMovietoFavorites或RemoveMovietoFavorites执行后x秒触发removeAlert操作，代码如下，谢谢

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>

从“vuex”导入{mapActions，mapState}
导出默认值{
名称：“警报”，
数据（）{
返回{
超时：空
}
},
安装的（）{
this.timeout=setTimeout（（）=>this.removeAlert（），3000）
},
在…之前{
clearTimeout（this.timeout）
},
计算：{
alertTypeClass（）{
返回'alert-${this.alert.type}`
},
…映射状态（'alert'，['alert']））
},
方法：mapActions（'alert'，['removeAlert']）
}

将其添加并从

媒体中删除

操作：

addMovieToFavourites（{commit，dispatch}，movie）{
提交（'ADD_favorite'，电影）
常数警报={
键入：“成功”，
消息：“已添加到收藏夹！”
}
//添加警报
分派（'alert/setAlert'，alert，{root:true}）
//删除警报
设置超时（（）=>{
分派（'alert/removeAlert'，{root:true}）
}, 3000)
}

如果所有警报都以这种方式工作，您可以通过在

setAlert

操作中将其排队，自动触发从每个警报中删除警报：

const actions={
setAlert（{commit}，alert）{
提交（“设置警报”，警报）；
设置超时（（）=>{
提交（“删除警报”）；
}, 3000);
},
...
}

这样就不需要执行

removeAlert

操作

---

您可能还需要一些警报管理或clearTimeout来在3秒内处理多个警报。如前所述，删除前一个警报可能意味着在整整3秒钟内不会显示后一个警报。

它正在工作，谢谢。我制作了一个包装器组件，因此每个警报都有单独的超时