状態が更新されたときにコンポーネントが再レンダリングされない

Question

これをデバッグしようとしましたが、作成されたライフサイクル関数で外部APIからデータを取得し、ストアを突然変異で更新すると、状態が更新されていないようになっているため、コンポーネントが再レンダリングされません。何か案は？ここ

は、コンポーネントのためのテンプレートである：ここ

<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> 

店舗ある：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

ものはプリミティブ、普通のオブジェクトまたは配列する必要があります。私は明示的にそれを言うドキュメントで何も見つけることができないが、私は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; 
},