VueJS从Vuex返回值不起作用

Posted 2023-02-22

【中文标题】VueJS从Vuex返回值不起作用

【英文标题】：VueJS returning value from Vuex not working

【发布时间】：2018-07-12 02:08:25

【问题描述】：

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

我知道这对于一个简单的 Flash 消息传递系统来说可能是多余的，但一旦我让它正常工作，它就会发挥更大的作用。

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

结构：

• 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";
         
      
   
);

警报.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 组件的函数参数正在传递，因为我可以通过控制台记录它。我在这里错过了什么？

非常感谢，

塞尔吉奥

【问题讨论】：

计算方法不适用于异步，除非您为此安装了插件

【参考方案1】：

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

【讨论】：

Aahhh...所以要清理工作代码，我应该改用for of 循环吗？

是的，使用普通循环是您的解决方案。

【参考方案2】：

因此，将 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;
         
      
   

编辑： 一个更清洁的解决方案是用 for...of 循环替换 forEach 循环 - 感谢 Ujjwal Nepal！

下面是代码示例：

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

【讨论】：

这正是 lodash 等实用程序库试图解决的问题。 const result = _.find(state.alertMessages, key: something ); return _.get(result, 'alert');。第二行仅在未找到警报消息的情况下才需要 - 它处理结果未定义的情况。