Vue.js automatische Kündigung von Vuex Store

Question

Ich kann nicht scheinen, herauszufinden, wie automatisch meine Warnungen zu entlassen. Ich speichere die Warnungen in Vuex, und ich erstelle die Warnungen über Aktionen. Es könnte eine beliebige Anzahl von Warnungen geben, und sie sollten in der Reihenfolge, in der sie erstellt wurden, gelöscht werden. Zu Illustrationszwecken erstelle ich eine Anzahl von Warnungen, eine alle 700 Millisekunden. Ich möchte, dass die Warnungen nach einer bestimmten Zeitspanne automatisch in der Reihenfolge ihrer Erstellung gelöscht werden. Ich bin nicht sicher, wie dies zu tun ist oder ob es eine bessere Möglichkeit gibt, globale Warnmeldungen zu verarbeiten, die nicht zu Vuex gehören. Hier ist mein Code:

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) 
} 

Vorlage:

<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

Hier ist eine mögliche Lösung:

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

Grundsätzlich erstellen Sie eine benutzerdefinierte Richtlinie:

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

die Sie auf die v-für, mit einem Rückruf als Parameter

<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> 

hinzufügen