Vuex에서 값을 반환하는 VueJ가 작동하지 않음

Vuex에서 값을 반환하는 VueJ가 작동하지 않음

Vuex를 통해 다양한 컴포넌트로부터 메시징/경고 시스템을 클릭 방식으로 구현하려고 합니다(예를 들어 vuex getter에게 표시할 메시지를 알려주는 인수를 전달합니다).단, 데이터를 반환하지 않습니다.

단순한 플래시 메시징 시스템으로는 무리일 수 있지만 제대로 작동하면 더 큰 목적을 달성할 수 있습니다.

현재 Alert 컴포넌트를 통해 상태 alert Messages 배열에 일치하는 메시지키/이름을 전달하고 있습니다만, 최종적으로 메서드 호출 시 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 컴포넌트의 function 인수가 전달되고 있음을 알 수 있습니다.이는 콘솔로그가 가능하기 때문입니다.내가 뭘 놓쳤지?

잘 부탁드립니다.

세르지오

MDN에 따르면 forEach() 루프를 종료하는 유일한 방법은 예외를 슬로우하는 것입니다.따라서 위의 코드에 문제가 있는 forEach() 루프를 종료하는 다른 방법은 없습니다.

그래서, Getters를 아래 코드로 바꾸면...왜 내 초기 코드가 작동하지 않는 거죠?반환이 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...ofloop – 감사합니다 우즈왈 네팔!!!

다음은 코드 예시입니다.

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

언급URL : https://stackoverflow.com/questions/48568019/vuejs-returning-value-from-vuex-not-working