Vuex 冻结大量突变

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()，整个浏览器就会冻结。我想这是因为我正在批量更新商店，而开发工具无法跟踪所有这些更改（150 - 200 个对象）。

我做错了什么吗？有没有更好的方法来批量更新 Vuex 存储中的对象？

Answer 1

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

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

Vuex 冻结大量突变

Vuex freezes on bulk mutations

javascript

vue.js

vuex