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

Posted 2023-02-22

【中文标题】状态更新时组件不重新渲染

【英文标题】：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);
      ,
    ,
);

【参考方案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;
,