Ich liebe vue.js und ich liebe auf jeden Fall berechnete Eigenschaften und VueX Getter. Aber ich bin an einem Punkt angelangt, an dem ich nicht sicher bin, ob die Art und Weise, wie ich sie verwende, einige Leistungsnachteile mit sich bringt.

Dies ist ein häufiges Muster in meinem Code (gilt auch für lokale Komponentendaten und berechnete Eigenschaften):

Beginnen Sie mit diesem einfachen Zustand (Quelle der Wahrheit):

export default () => ({
   bonds: {
    eth: [],
    celo: []
  }
})

In meinem Getter mache ich das normalerweise so:

export default {
  getBondsEth(state) {
    return state.bonds.eth
  },
  getBondsCelo(state) {
    return state.bonds.celo
  },
  getTotalBondsEth(_, getters) {
    return getters.getBondsEth.length
  },
  getTotalBondsCelo(_, getters) {
    return getters.getBondsCelo.length
  },
  getTotalBonds(_, getters) {
    return getters.getTotalBondsEth + getters.getTotalBondsCelo
  },
  getWhateverComputationEth(_, getters) {
    return getters.getBondsEth.reduce... or map or filter or find etc....
  }
  ...
}

Meine Frage lautet also

1. Wird dies als schlechte Vorgehensweise angesehen, weil ich einen Getter verwende, der von anderen Gettern abhängt? Werden diese als zirkuläre Abhängigkeiten betrachtet?

2. Soll ich meine Getter immer direkt von der Quelle der Wahrheit ableiten? Ändern Sie das Obige beispielsweise in...

getTotalBonds(state) {
    return state.bonds.eth.length + state.bonds.celo.length
}

3. Gibt es eine Möglichkeit, meine Getter oder berechneten Eigenschaften mithilfe der Browserkonsole zu debuggen, um sicherzustellen, dass ich keine Leistungsprobleme oder seltsamen Iterationsschleifen usw. habe?

Vielen Dank, wenn Sie sich die Zeit nehmen, zu antworten!