dom中的vuejs数据更新，但

Question

我有vuex状态，突变和操作。我的状态包含在派发vuejs组件中的动作之后保存来自数据库的值的数组。

我成功地从分配到store.state我对DOM的价值，我只想说的dispatch-> mutate->状态过程是确定的。

示例场景

我是从数据库中获取会话列表和分配信息经由商店状态的DOM元素ul>li。

当我点击这个ul >li时，我收到与会话成功相关的消息，并成功显示它们。但是，如果我尝试访问包含消息的此数组的message.length，它将返回一个空值，直到我获得所选对话的长度属性为止。如果我选择不同的对话，并且尝试访问length属性，则会继续。它会显示前一个值，除非双击。

这是我想说

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> 

助阵请

Answer 1

你派遣2分的动作，我不能肯定地说，因为你没有发布操作的代码，但我相信这些操作是异步的。

所以你需要返回从这些行动承诺，然后改变你的代码：

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>