dom의 vuejs 데이터가 업데이트되었지만

Question

vuex 상태, 변이 및 동작이 있습니다. 내 상태에는 vuejs 구성 요소에서 작업을 디스패치 한 후 데이터베이스에서 값을 보유하는 배열이 포함되어 있습니다. 나는 성공적으로 내 DOM을에 store.state의 값을 할당하고

은 나를 그냥 디스패치> mutate-> 상태 프로세스가 괜찮 가정 해 봅시다.

내가 데이터베이스에서 대화 목록을 가져오고 저장 상태를 통해 DOM에 ul>li 요소에 대한 정보를 할당하고 예 시나리오.

이 ul >li을 클릭하면 대화와 관련된 메시지가 성공적으로 표시되고 성공적으로 표시됩니다. 하지만 메시지를 포함하는 배열의 message.length에 액세스하려고하면 선택한 대화의 길이 속성을 얻을 때까지 두 번 클릭 할 때까지 null 값이 반환됩니다. 다른 대화를 선택하면 length 속성에 액세스하려고 시도합니다. 두 번 클릭하지 않으면 이전 값이 표시됩니다. 나는 당신이이 작업을 파견하는

Answer 1

을

export default { 

    computed: mapState({ 
    chatStore: state => store.state; 
    }), 
    created() { 
    this.$store.dispatch('conversationlist') 

    /*this loads the conversations and i assign the values to the 
       DOM (ul > li) when the ul>li is clicked it calls 
       onCLickGetConversationMesseges() */ 
    if (this.chatStore.conversationlist.length == 0) { 
     /*when i console log this its return a null length value 
          until i double click */ 
    } 
    }, 
    methods: { 
    onCLickGetConversationMesseges() { 
     this.$store.dispatch('setSelectedConversation') 

     if (this.chatStore.messageList.length == 0) { 
     /*when i console log this its return a null length value 
     until i double click */ 
     } 
    } 
    } 


<template></template> 
<style scoped></style> 

도움을 주시기 바랍니다 밖으로 말을하려고 무엇을

이, 당신은 행동 코드를 게시하지 않았기 때문에 내가 확실히 말할 수는 없지만 가정 이러한 동작은 비동기입니다.

export default { 

    computed: mapState({ 
    chatStore: state => store.state; 
    }), 
    created() { 
    this.$store.dispatch('conversationlist').then(() => { 
     /*this loads the conversations and i assign the values to the 
     DOM (ul > li) when the ul>li is clicked it calls 
     onCLickGetConversationMesseges() */ 
    if (this.chatStore.conversationlist.length == 0) { 
     /*when i console log this its return a null length value 
          until i double click */ 
    } 
    }) 


    }, 
    methods: { 
    onCLickGetConversationMesseges() { 
     this.$store.dispatch('setSelectedConversation').then(() => { 
      if (this.chatStore.messageList.length == 0) { 
      /*when i console log this its return a null length value 
      until i double click */ 
      } 
     }) 


    } 
    } 


<template></template> 
<style scoped></style> 

:

그래서 당신은 이러한 작업에서 약속을 반환 한 다음 코드를 변경해야