VuetifyのSnackbarで複数メッセージ表示する方法

import Vue from 'vue';
import Vuex from 'vuex';
// 個々のメッセージ識別するためのid採番用に使う
import uuidv4 from 'uuid/v4';

Vue.use(Vuex);


export default new Vuex.Store({

  state: {
    messages: [],
  },

  getters: {
    // メッセージが1つもない場合はSnackbarを表示しない
    isShow: state => state.messages.legth === 0,
    getMessages: state => state.messages,
  },

  actions: {
    /**
     * Snackbarにメッセージ(複数指定可)を表示する
     */
    ADD_MESSAGES({ commit }, payload) {
      commit('addMessages', payload);
    },

    /**
     * 指定したメッセージをSnackbarから削除する
     */
    REMOVE_MESSAGE({ state, commit }, payload) {
      commit('removeMessage', payload);
    },
  },

  mutations: {

    addMessages(state, payload) {
      // メッセージをストアに加える際に、個々のメッセージが識別できるようにidを加える
      state.messages = [...state.messages, ...payload.messages.map(m => Object.assign(m, { id: uuidv4() }))];
    },

    removeMessage(state, payload) {
      const { id } = payload;
      state.messages.forEach((v, index) => {
        if (v.id === id) {
          state.messages.splice(index, 1);
        }
      });
    },
  },
});

<template>
  <!--
    タイムアウトの管理は、大枠ではせずメッセージ毎に行う
    全てのメッセージが消えたら大枠を消す
    大枠を消す処理はStoreに実装する
  -->
  <v-snackbar
    v-model="isShow"
    color="white"
    :timeout="0"
    top
    auto-height
  >
    <!-- メッセージを縦並びにするためdivタグでラップする -->
    <div style="margin: -14px auto; width: 100%;">
      <div style="margin: 0 -24px">
        <template v-for="(message, index) in getMessages">
          <snackbarMessage
            :key="message.id"
            @remove="removeMessage({ id: message.id })"
            :message="message"
          />
          <div
            style="margin:1px 0;"
            v-if="index != lastIndex"
            :key="`${message.id}-divider`"
          />
        </template>
      </div>
    </div>
  </v-snackbar>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
// メッセージ表示用コンポーネント
import snackbarMessage from './snackbar-message.vue';

export default {

  components: {
    snackbarMessage,
  },

  computed: {
    ...mapGetters([
      'isShow'
      'getMessages'
    ]),

    lastIndex() {
      return this.messages.length - 1;
    },
  },

  methods: {
    ...mapActions({
      removeMessage: actionType.snackbar.REMOVE_MESSAGE,
    }),
  },
};
</script>

<template>
  <v-card
    style="display: flex;padding: 6px 12px;"
    :color="message.state.color"
  >
    <div style="display: flex;align-items: center;">{{ message.text }}</div>
    <v-spacer></v-spacer>
    <v-btn
      icon
      depressed
      @click="remove()"
    >
      <v-icon color="rgba(51, 51, 51, 0.3)">cancel</v-icon>
    </v-btn>
  </v-card>
</template>

<script>
export default {
  props: {
    message: Object,
  },

  data() {
    return {
      activeTimeout: -1,
    };
  },

  mounted() {
    // メッセージコンポーネントがマウントされた時点からカウント開始
    this.setTimeout();
  },

  methods: {

    setTimeout() {
      window.clearTimeout(this.activeTimeout);
      const { timeout } = this.message.state;
      // タイムアウト時間が設定されている場合は
      if (timeout) {
        // 指定時間後にremoveを呼び出す
        this.activeTimeout = window.setTimeout(() => {
          this.remove();
        }, timeout);
      }
    },

    // 親コンポーネントにremoveを発火
    remove() {
      this.$emit('remove');
    },
  },
};
</script>