Vue.js автоответовое предупреждение от магазина Vuex

Question

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

https://jsfiddle.net/thL4rLta/1/

/*------ Animations ------*/ 
Vue.transition('fade', { 
    enterClass: 'fadeInDown', 
    leaveClass: 'fadeOutUp' 
}) 

/* ----- Store ----- */ 
const state = { 
    items: [] 
}; 

const mutations = { 
    SHOW_ALERT (state, data) { 
    data.id = Date.now() 
    state.items.push(data) 
    }, 
    HIDE_ALERT (state, item) { 
    state.items.$remove(item) 
    }, 
}; 

const store = new Vuex.Store({ 
    state, 
    mutations 
}); 

/* ----- Component ----- */ 
new Vue({ 
    el: '#app', 
    store, 
    vuex: { 
    getters: { 
     alerts: (state) => state.items 
    }, 
    actions: { 
     hideAlert: ({ dispatch }, alert) => dispatch('HIDE_ALERT', alert) 
    }, 
    }, 
    methods: { 
    dismiss (e) { 
     this.hideAlert(e) 
    } 
    } 
}); 

// Creat alerts 
function doSetTimeout (i) { 
    setTimeout(() => { 
    store.dispatch('SHOW_ALERT', {message: 'sdfsdf'}) 
    }, 700 * i) 
} 

for (var i = 0; i <= 4; ++i) { 
    doSetTimeout(i) 
} 

Шаблон:

<div class='test' id="app"> 
    <div v-for="alert in alerts" 
     class="animated alert alert-dismissible alert-danger" 
     transition="fade" 
     v-bind:class="alert.type" 
     role="alert"> 
     <button @click="dismiss(alert)"type="button" class="close" data-dismiss="alert" aria-label="Close"> 
     <span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> 
     </button> 
    {{alert.message}} 
    </div> 
</div> 

Answer 1

Вот один из возможных решений:

https://jsfiddle.net/thL4rLta/2/

В принципе, создать пользовательскую директиву:

Vue.directive('delay', { 
    params: ['cb'], 
    bind: function() { 
    setTimeout(this.params.cb, 3000) 
    } 
}) 

Что вы можете добавить к V-для, с обратного вызова в качестве параметра

<div class='test' id="app"> 
    <div v-for="alert in alerts" v-delay :cb="()=>{dismiss(alert)}" 
     class="animated alert alert-dismissible alert-danger" 
     transition="fade" 
     v-bind:class="alert.type" 
     role="alert"> 
     <button @click="dismiss(alert)"type="button" class="close" data-dismiss="alert" aria-label="Close"> 
     <span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> 
     </button> 
    {{alert.message}} 
    </div> 
</div>