vuex 스토어에서 값이 변경된 경우 구성 요소의 상태를 업데이트하는 방법

vuex 스토어에서 값이 변경된 경우 구성 요소의 상태를 업데이트하는 방법

vuex 스토어에는 한 컴포넌트로부터 메시지를 수신하고 다른 컴포넌트에서 프롬프트메시지를 표시/숨기는 돌연변이가 있습니다(Like).You are logged in로그인 성공 후 propmpt):

setPromptMsg: function (state, msg) {
    state.showPromptMsg = true;
    state.promptMsg = msg;
        function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
      }                           
     sleep(3000).then(() => {
          store.showPromptMsg = false;
          state.promptMsg = '';
          console.log('show message set to false');
      });
},

이 건물에서, 나는showPromptMsg스토어에서 계산된 속성으로 다음을 수행합니다.

computed: {
    showPromptMsg () {
        return this.$store.state.showPromptMsg;
    },
    promptMsg () {
    return this.$store.state.promptMsg;
    }
}

템플릿 내의 프롬프트메시지 표시/숨김:

   <div v-show="showPromptMsg">
      <div class="text-center" >
         <strong> {{promptMsg}} </strong>
      </div>
  </div>

문제는 프롬프트가 타임아웃되었을 때, 즉 타임아웃이 되는 것입니다.showPromptMsg스토어에서 false로 설정되고 변경 내용이 컴포넌트에 반영되지 않으므로 알림 상자가 사라지지 않습니다.

이 문제를 해결하는 관용적인 방법은 무엇일까요?

코드가 설정 중입니다.

store.showPromptMsg = false;

네가 원하는 건

state.showPromptMsg = false;

고객님의 고객명NotificationBarComponent.vue템플릿:

<div>
    <div class="text-center" >
       <strong> {{ message }} </strong>
    </div>
</div>

고객님의 고객명NotificationBarComponent.vue구성 요소 정의에서 표시할 사용자 지정 메시지를 전달하기 위한 프로펠을 추가하고 마운트된 상태에서 시간 초과를 시작하여 알림을 숨깁니다.

export.default {
    props: ['message'],
    mounted() {
        window.setTimeout(() => {
            this.$store.commit('handleMessageState', false)
        }, 3000);
    }   
};

스토어에서 알림 표시를 관리하는 속성을 만듭니다.isNotificationBarDisplayed: false

handleMessageState(state, payload) {
    state.isNotificationBarDisplayed = payload;
}

사용하고 싶은 장소:

<notification-bar-component v-show="isNotificationBarDisplayed" message="Some message here"></notification-bar-component>

computed: {
    isNotificationBarDisplayed () {
        return this.$store.state.isNotificationBarDisplayed;
    },
}

언급URL : https://stackoverflow.com/questions/46425735/how-to-update-state-in-a-component-when-the-value-changed-at-vuex-store