状态更新时组件不重新渲染答案

【问题标题】：Component not re-rendering when state is updated状态更新时组件不重新渲染
【发布时间】：2018-06-05 09:20:46
【问题描述】：

我一直在尝试对此进行调试，但由于某种原因，当我在创建的生命周期函数中从外部 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>

这里是商店：

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);
      },
    },
});

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

vuex 状态树中的任何东西都需要是原始的、普通的对象或数组。我在文档中找不到任何明确说明的内容，但我确实找到了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;
},

【讨论】：