一括変異でVuexがフリーズする

Question

私はAxesを使用してバックエンドから取得したチャートオブジェクトを格納するために使用する次のVuexストアを持っています。

const getters = { 
    charts(state) { return _.without(state.charts, undefined); }, 
    chart(state) { return id => state.charts.find(c => { return c.id === id; }) } 
} 
const actions = { 
    getCharts({ commit, rootState }) { 
     // Load data from server 
     return api.get(rootState.Laravel.api_url + '/chart') 
      .then((response) => { 
       // Store the returned data 
       _.forEach(response.data.data, function(chart) { 
        commit('STORE_CHART', chart); 
       }); 
      }) 
      .catch((error) => console.log(error)); 
    } 
} 
const mutations = { 
    STORE_CHART(state, chart) { 
     Vue.set(state.charts, chart.id, Object.freeze(chart)); 
    } 
} 

ストアが正常に動作しますが、できるだけ早く私はVueDevtoolsを開き、再び）（getChartsを呼び出すよう、全体のブラウザがフリーズします。私は一括してストアを更新しているため、devtoolsはこれらの変更（150〜200個のオブジェクト）をすべて追跡できないためです。

私が間違っていることはありますか？ Vuexストアのオブジェクトを一括更新するより良い方法はありますか？

Answer 1

の代わりにあなたのforEach()あなたが直接これが実際に行うには良い方法である突然変異をSTORE_CHART`するペイロードとしてresponse.data.dataを渡し、突然変異自体

const actions = { 
    getCharts({ commit, rootState }) { 
     // Load data from server 
     return api.get(rootState.Laravel.api_url + '/chart') 
      .then((response) => { 
       // Store the returned data 
       commit('STORE_CHART', response.data.data); 
      }) 
      .catch((error) => console.log(error)); 
    } 
} 
const mutations = { 
    STORE_CHART(state, charts) { 
      _.forEach(charts, function(chart) { 
       Vue.set(state.charts, chart.id, Object.freeze(chart)); 
      }); 
    } 
}