Vue.js 如何在vuex中添加元素而不启动计算值？

我尝试在vue/vyex上添加分数，所有的添加都发生在getter中，所以这意味着在我们更改一些字段后，我们开始计算值

<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>

当我点击“添加新分数”按钮时，我用计算属性创建新对象，并在getter中出错，因为我如何理解，计算检查更改和getter开始工作，但没有新属性，我出错：

v-on处理程序中的错误：“TypeError:无法读取未定义的属性‘分母’”

<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>

商店

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

});

<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>

组件计算属性

 computed: {
    ...mapState([
      'fractions',
    ]),

    ...mapGetters([
      'takeSum',
    ]),

  },

<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>

和模板

<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>

总和：{{takeSum}}

您的问题在

takeSum

中。您没有正确使用减速器

<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>

减缩器遍历数组的每个元素，并从中计算单个值。此值可以是任何内容，包括对象。但是，您必须返回每个项目之间的结果。您返回的内容将在下一个周期中使用。您的代码将变成这样：

<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>

  const sum = state.fractions.reduce((prev, curr) => {
    const newSum = { ...prev };

    newSum.denominator = prev.denominator + curr.denominator;
    newSum.numerator = prev.numerator + curr.numerator;

    return newSum;
  });

因为您没有返回任何内容，所以第一次调用reducer时（调用

reduce（…）

中的函数时，将使用数组的第一个和第二个元素调用它。第二次调用时，

prev

为

未定义

（您没有返回任何内容），并且

curr

是数组中的第三个元素

<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>

---

然而，我必须说，你没有正确地计算分数之和。如果我们取1/2和1/3的和，你会说这个和实际上是2/5。然而，快速计算表明情况并非如此

<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>

---

如果你想对两个分数求和，你必须确保两个分数的分母相等。在我们前面的例子中，这将是

1/2=3/6

和

1/3=2/6

，因此总和将是

5/6

。

A/b+c/d

的典型总和是

（（A*d）+（b*c））/（b*d）

Ops，真的忘记了reduce中的返回：）关于不相等这是计算和的第一部分，下一步是公分母，但无论如何，谢谢！

<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>