javascript - VueJS 从 Vuex 返回值不起作用

Question

我正在尝试通过 Vuex 和点击方法上的各种组件实现消息/警报系统 - 例如 - 传递一个参数告诉 vuex getter 要显示的消息。除了它不返回任何数据。

我知道这对于一个简单的 flash 消息传递系统来说可能有点矫枉过正，但一旦我让它正常工作，它就会发挥更大的作用。

目前，我通过 Alert 组件在状态 alertMessages 数组中传递用于匹配的消息键/名称，但最终这将在方法调用时从登录组件传递。

结构:

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

这是我拥有的:商店.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";
         }
      }
   }
});

警报.vue:模板

<template>
   <div class="alert">
       {{message}}
   </div>
</template>

脚本

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;
   }
}

似乎 if() 语句正在做一些阻止其内部 return 工作的事情。我知道 Alert 组件的函数参数正在传递，因为我可以控制台记录它。我在这里缺少什么？

提前致谢

塞尔吉奥

Answer 1

根据 MDN，终止 forEach() 循环的唯一方法是抛出异常。所以没有其他方法可以终止上面代码中的问题所在的 forEach() 循环。