how add element in vuex and dont start computed value? - vue.js

Question

I try to add fractions on vue/vyex all addition happened in getter so its means after we change some fields, we start computed value.
And when i click on button "add new fractions", i create new object with computed property and taking error in getter, because how i understand, computed check changes and getter start work, but there don't have new property and i take that error : Error in v-on handler: "TypeError: Cannot read property 'denominator' of undefined"
store
export default new Vuex.Store({
state: {
fractions: [
{
id: 1,
numerator: 0,
denominator: 0,
},
{
id: 2,
numerator: 0,
denominator: 0,
},
],
},
actions,
mutations: {
changeInput(state, payload) {
state.fractions.forEach((el) => {
if (el.id === payload.id) {
el[payload.key] = payload[payload.key];
}
});
},
addFraction(state) {
state.fractions.push({
id: state.fractions.length + 1,
numerator: 0,
denominator: 0,
});
},
deleteFraction(state, id) {
state.fractions.forEach((el, i) => {
if (el.id === id) {
state.fractions.splice(i, 1);
}
});
},
},
getters: {
takeSum(state) {
const sum = {
denominator: 0,
numerator: 0,
};
state.fractions.reduce((prev, curr) => {
sum.denominator = prev.denominator + curr.denominator;
sum.numerator = prev.numerator + curr.numerator;
});
return sum;
},
},
});
component computed property
computed: {
...mapState([
'fractions',
]),
...mapGetters([
'takeSum',
]),
},
and template
<Fraction
v-for="(fraction, index) in fractions"
:key="index"
:numerator=fraction.numerator
:denominator=fraction.denominator
:id="fraction.id"
#changeFractionInput=changeFractionInput
v-bind:onClick="deleteFraction"
/>
<div>sum: {{takeSum}}</div>

Answer 1

Your problem is in takeSum. You are not using the reducer correctly.
A reducer walks over every element of an array, and computes a single value from it. This value can be anything, including an object. You must however return the result between every item. What you return is used in the next cycle. Your code would turn into something like this:
const sum = state.fractions.reduce((prev, curr) => {
const newSum = { ...prev };
newSum.denominator = prev.denominator + curr.denominator;
newSum.numerator = prev.numerator + curr.numerator;
return newSum;
});
Because you did not return anything, the first time the reducer (the function inside reduce(..) is called, it is called with the first and second element of your array. The second time it is called with prev being undefined (you did not return anything), and curr being the third element in your array.
I must however say that you are not correctly calculating the sum of fractions. If we take the sum of 1/2 and 1/3, you would say that the sum is in fact 2/5. However, a quick calculation shows us that this is not the case.
If you want to sum two fractions, you must make sure that the denominators of both are equal. For our previous example, this would be 1/2 = 3/6 and 1/3 = 2/6, so the sum would be 5/6. A typical sum of a/b + c/d would be ((a*d) + (b*c)) / (b*d).