My unique application is a simplified spreadsheet tool created using Vue and Vuex. It consists of three main components: TableCollection, Table, and Row. The TableCollection contains an array of multiple Table objects, each with its own array of multiple Row objects.
Within the Row component, there is a property called calculatedField which combines two fields within the row to generate a third field. Now, I'm contemplating whether to set up this calculatedField as a computed property within the local scope of the Row component or as a getter within the Vuex store.
The Table component necessitates a certain value named subTotal, calculated by aggregating all the calculatedField values from the rows in the table. Hence, the computation of subTotal directly relies on the calculation of calculatedField.
If I opt for the former approach, implementing calculatedField locally as a computed property of Row ensures its caching. However, encountering difficulties accessing this calculated field from a parent such as Table impedes smooth functionality.
computed : {
subTotal : function () {
let total = 0;
this.table.rows.forEach(function (row) {
total += row.calculatedField;
});
return total;
}
}
This resulted in NaN, highlighting the challenge of linking calculatedField across components efficiently without duplicating codes in computed properties - violating the DRY principle.
An alternative could involve transforming both subTotal and calculatedField into getters within the store, but introduces complexities like passing arguments to the getter for efficient retrieval, thereby compromising cache optimization.
Lastly, one can consider centralizing the logic for calculatedField in a global helper or mixin to avoid duplication and inefficiencies associated with getters, although departing slightly from compartmentalization specific to Table and Row components.
Amid these considerations, it remains pivotal to explore missed solutions while adhering to the preferred 'Vue-way' of streamlining data flow between interdependent components.