title: Vue.js auto dismiss alert from Vuex store
body: <p>I can't seem to figure out how to auto dismiss my alerts. I am storing the alerts in Vuex, and I am creating the alerts via actions. There could be any number of alerts, and they should be dismissed in the order in which they where created.  For illustration purposes, I am creating a number of alerts, one every 700 milliseconds.  I would like the alerts to auto dismiss in the order in which they were created, after a set amount of time.  I am not sure how to do this or if there is a better way to handle global alert messages that aren't part of Vuex. Here is my code:</p>
  
  <p><a href="https://jsfiddle.net/thL4rLta/1/" rel="nofollow">https://jsfiddle.net/thL4rLta/1/</a></p>
  
  <pre><code>/*------ 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) =&gt; state.items
      },
      actions: {
        hideAlert: ({ dispatch }, alert) =&gt; dispatch('HIDE_ALERT', alert)
      },
    },
    methods: {
      dismiss (e) {
        this.hideAlert(e)
      }
    }
  });
  
  // Creat alerts
  function doSetTimeout (i) {
    setTimeout(() =&gt; {
      store.dispatch('SHOW_ALERT', {message: 'sdfsdf'})
    }, 700 * i)
  }
  
  for (var i = 0; i &lt;= 4; ++i) {
    doSetTimeout(i)
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;div class='test' id="app"&gt;
    &lt;div v-for="alert in alerts" 
        class="animated alert alert-dismissible alert-danger" 
        transition="fade" 
        v-bind:class="alert.type" 
        role="alert"&gt;
        &lt;button @click="dismiss(alert)"type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
          &lt;span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;/button&gt;
      {{alert.message}}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>