Question

我有以下Vuex商店用于存储使用Axios从我的后端检索的图表对象。

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

您可以直接将chart作为有效负载传递给STORE_CHART`变体，而不是将每个forEach()的变异转换为STORE_CHART`突变，并将forEach应用于变异本身

response.data.data

Vuex冻结了大量突变

1 个答案: