I've been experimenting with creating a global alert component using bootstrap vue alert. I'm utilizing the vuex store to manage the alert's state.
Below, you can find my Alert.vue component:
<template>
<b-alert show :variant="variant" dismissible> {{ message }} </b-alert>
</template>
<script>
export default {
props: {
variant: String,
message: String
},
data() {
return {};
},
name: "Alert",
methods: {},
computed: {}
};
</script>
<style scoped></style>
Here is my vuex store:
const alert = {
namespaced: true,
state: {
variant: "",
message: "",
showAlert: false
},
getters: {
variant: state => state.variant,
message: state => state.message,
showAlert: state => state.showAlert
},
mutations: {
setSuccessvariant(state) {
state.variant = "success";
},
setDangervariant(state) {
state.variant = "danger";
},
setMessage(state, message) {
state.message = message;
},
showAlert(state) {
state.showAlert = true;
},
hideAlert(state) {
state.showAlert = false;
}
},
actions: {}
};
export default alert;
I'm using the alert component in another component like this:
<alert v-if="showAlert" :message="message" :variant="variant"></alert>
The computation for showAlert in this component looks like this:
showAlert() {
return this.$store.getters["alert/showAlert"];
}
This function only appears to work the first time. The alert pops up when triggered initially, but once dismissed, it does not reappear upon subsequent triggers.