<template>
  <div class="mt-3 ml-3">
    <Alert />
    <b-button variant="success" @click="showSuccessAlert">Trigger Success Alert</b-button>
    <b-button variant="danger" class="ml-2" @click="showFailureAlert">
      Trigger Failure Alert
    </b-button>
    <b-button variant="warning" class="ml-2" @click="showWarningAlert">
      Trigger Warning Alert
    </b-button>
  </div>
</template>

<script>
import Alert from '@/components/alert/Alert.vue';

export default {
  components: {
    Alert,
  },
  methods: {
    showSuccessAlert() {
      this.$store.dispatch('alert/successAlert', 'Great Success!!');
    },
    showFailureAlert() {
      this.$store.dispatch('alert/failureAlert');
    },
    showWarningAlert() {
      this.$store.dispatch('alert/warnAlert', 'Something may be awry...');
    },
  },
};
</script>
