I'm currently working on integrating a messaging/alert system using Vuex in my project. The goal is to pass an argument from various components, triggering the display of specific messages through vuex getters. However, I'm facing an issue where no data is being returned.
While I understand that this might be seen as excessive for a simple flash messaging feature, it serves a larger purpose once fully functional.
Currently, I am passing the message key/name to match in the state alertMessages array via the Alert component. Eventually, this will be done through method calls from the Login Component.
Here's the structure:
• App.vue
--> • Alert component
--> • Login component (login method)
--> • NavHeader component
--> Logout Btn (logout method)
• Store.js
This is what I have in Store.js:
export const store = new Vuex.Store({
state: {
alertMessages: [
{ key: "loginSuccess", alert: "logged in.", redirectPath: "dashboard" },
{ key: "loginError", alert: "try again.", redirectPath: "login" }
]
},
getters: {
pickMessage: state => {
return (something) => {
state.alertMessages.forEach(msg => {
if(msg.key == something){
// The current return does not send any data through.
return msg.alert;
}
});
// This return works. Alert gets Hey There.
// return "Hey There";
}
}
}
});
In Alert.vue:
<template>
<div class="alert">
{{message}}
</div>
</template>
Scripts:
export default {
name: 'alert',
data () {
return {
message: ''
}
},
computed: {
alertMessage: async function(){
try {
// Passing loginSuccess for key matching.
this.message = this.$store.getters.pickMessage('loginSuccess');
} catch(error) {
console.log(error);
}
}
},
created: function(){
this.alertMessage;
}
}
It seems like the if() statement is causing issues with the return inside it. I can confirm that the function argument from the Alert component is being passed correctly, as I can log it. Can you spot what I may be missing here?
Thank you in advance,
Sergio