Question

我正在尝试通过Vuex和click方法上的各个组件实现消息传递/警报系统 - 例如 - 传递一个参数，告诉vuex getter显示哪条消息。除非它没有返回任何数据。

我知道这对于一个简单的闪存消息传递系统来说可能有些过分，但是一旦我使它正常工作，它就会有更大的用途。

目前，我通过Alert组件在状态alertMessages数组中传递消息密钥/名称以进行匹配，但最终会在方法调用时从Login Component传递。

结构：

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

这就是我所拥有的： 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>
   <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()语句正在做一些阻止其内部返回工作的事情。我知道来自Alert组件的函数参数正在传递，因为我可以控制它记录它。我在这里缺少什么？

非常感谢，

塞尔吉奥

Answer 1

因此，将getter更改为下面的代码... 为什么让我的初始代码不起作用呢？因为返回在forEach循环内（多次返回）？

工作代码：

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

修改更清晰的解决方案是用forEach循环替换for...of循环 - 谢谢Ujjwal尼泊尔!!!

以下是代码示例：

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

Answer 2

根据MDN，终止forEach（）循环的唯一方法是抛出异常。因此，没有其他方法可以终止上面代码中出现问题的forEach（）循环。

VueJS从Vuex返回值不起作用

2 个答案: