상태가 업데이트 될 때 구성 요소가 다시 렌더링되지 않습니다.

Question

이 코드를 디버깅하려했지만 작성한주기 함수에서 외부 API의 데이터를 가져 와서 스토어를 돌연변이로 업데이트 할 때 구성 요소의 계산 된 속성 구성 상태가 다시 렌더링되지 않는 상태로 업데이트되는 것처럼 보이지 않는 상태가되고 있습니다. 어떤 아이디어? vuex 상태 트리

export const store = new Vuex.Store({ 
    state: { 
     transactions: [], 
    }, 
    getters: { 
     transactions: state => { 
     return state.transactions; 
     } 
    }, 
    mutations: { 
     setTransactions: (state, transactions) => { 
     let txs = transactions.map(transaction => { 
      return new Transaction(transaction.id, transaction.prop1, transaction.prop2); 
     }); 
     state.transactions = txs; 
     }, 
    }, 
    actions: { 
     setTransactions: (context, transactions) => { 
     context.commit('setTransactions', transactions); 
     }, 
    }, 
}); 

Answer 1

뭐든지 원시적 일반 목적 또는 배열 될 필요 :

여기

<template> 
    <div class="list"> 
     <ul> 
      <ListItem v-for="transaction in transactions" :list-item-data="transaction" :key="transaction.txid"/> 
     </ul> 
    </div> 
</template> 

<script> 
    import ListItem from './ListItem.vue'; 
    import External from '../ExternalAPI'; 

    export default { 
     methods: { 
      fetchData() { 
       return ExternalAPI.fetch(data => { 
        this.$store.dispatch('setTransactions', data); 
       }); 
      } 
     }, 
     components: { 
      ListItem 
     }, 
     computed: { 
      transactions() { 
       return this.$store.getters.transactions; 
      }, 
     }, 
     created() { 
      this.fetchData(); 
     }, 
    } 
</script> 

가게이다 : 여기

구성 요소에 대한 템플릿이다. 문서에서 명시 적으로 아무 것도 찾을 수 없지만 comment on vuex issue 153을 찾았습니다.

setTransactions 돌연변이에서 Transaction을 인스턴스화합니다. 이를 다음과 같이 변경해보십시오.

setTransactions: (state, transactions) => { 
    let txs = transactions.map(transaction => { 
    return { 
     id: transaction.id, 
     prop1: transaction.prop1, 
     prop2: transaction.prop2 
    }; 
    }); 
    state.transactions = txs; 
},