VueJS returning value from Vuex not working

Question

I'm trying to implement a messaging/alerting system through Vuex and from the various components on a click method - for example - pass an argument that tells vuex getter which message to display. Except that it is not returning the any data.

I know this may be overkill just for a simple flash messaging system, but it server a greater purpose once I get it working properly.

At the moment, I am passing the message key/name for matching in the state alertMessages array via the Alert component, but eventually this would be passed from the Login Component upon a method call.

Structure:

• App.vue
--> • Alert component
--> • Login component (login method)
--> • NavHeader component
    --> Logout Btn (logout method)
• Store.js

Here's what I have: 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){
                  // This return does not send any data through.
                  return msg.alert;
               }
            });
            // This return works. Alert gets Hey There.
            // return "Hey There";
         }
      }
   }
});

Alert.vue: Template

<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);
         } finally {

         }
      }
   },
   created: function(){
      this.alertMessage;
   }
}

Seems the if() statement is doing something that prevents the return inside it to work. I know that the function argument from the Alert component is getting passed, because I can console log it. What am I missing here?

Thanks so much in advance,

Sergio

computed methods don't work with async, unless you have a plugin installed for that — Ferrybig
– Ferrybig, Commented Feb 1, 2018 at 18:07

Ujjwal Nepal · Accepted Answer · 2018-02-01 17:23:21Z

1

As per MDN the only way to terminate a forEach() loop is to throw exception. So there is no other way to terminate a forEach() loop that's the problem in your code above.

answered Feb 1, 2018 at 17:23

Ujjwal Nepal

5465 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sergio Over a year ago

Aahhh... so to clean up the working code, I should be using a for of loop instead?

Ujjwal Nepal Over a year ago

Yeah using a plain loop is the solution in your case.

Sergio · Accepted Answer · 2018-02-01 17:39:20Z

1

So, changing the getters to the code below worked... Why exactly was making my initial code not work? Because the return was inside the forEach loop (multiple returns)?

Working code:

   getters: {
      pickMessage: state => {
         return (something) => {
          let val;
            state.alertMessages.forEach(msg => {
               if(msg.key == something){
                 val = msg.alert;
               }
            });
            // This return works. Alert gets Hey There.
            // return "Hey There";

            return val;
         }
      }
   }

EDIT: An even cleaner solution is to replace the forEach loop with a for...of loop – Thanks Ujjwal Nepal!!!

Here is the code example:

getters: {
      pickMessage: state => {
         return (something) => {
            let arr = state.alertMessages
            for(let a of arr){
               if(a.key == something){
                  return a.alert;
               }
            }
         }
      }
   }

edited Feb 1, 2018 at 17:39

answered Feb 1, 2018 at 17:13

Sergio

8223 gold badges13 silver badges42 bronze badges

1 Comment

aaaaaa Over a year ago

This is exactly what utility libraries like lodash try to tackle. const result = _.find(state.alertMessages, { key: something }); return _.get(result, 'alert');. The second line is only necessary in case no alert messages were found - it handles the case where result is undefined.

Collectives™ on Stack Overflow

VueJS returning value from Vuex not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related