Detailliertes Beispiel für die Statusverwaltung der Hilfsfunktion der Vue-Frontend-Entwicklung

  //....
  berechnet: {
        zählen: Funktion(){
            gib dies zurück.$store.state.count
        }
    }
 //....    

importiere { mapState } von 'vuex' //MapState-Objekt einführen export default {
  // ...
  berechnet: mapState({
    // Pfeilfunktionen können den Code prägnanter machen zählen: state => state.count,
  })
}
Oder importiere { mapState } von 'vuex' //Führe mapState-Objekt ein export default {
  // ...
  berechnet: mapState({
    'count', // im Einklang mit dem Statusnamen countAlias: 'count' // countAlias ​​​​ist der in der Referenzkomponente verwendete Alias})
}

importiere { mapGetters } von 'vuex'
Standard exportieren {
  // ...
  berechnet: {
  // Verwenden Sie den Object Spread Operator, um Getter in das berechnete Objekt zu mischen...mapGetters([
      'AnzahlDouble',
      'Doppelte und doppelte Anzahl',
      //..
    ])
  }
}

importiere { mapMutations } von 'vuex'
Standard exportieren {
  //..
  Methoden: {
    …mapMutations([
      „Inkrement“ // Ordnen Sie this.increment() diesem.$store.commit(„Inkrement“) zu.
    ]),
    ...mapMutations({
      hinzufügen: 'Inkrement' // Ordnen Sie this.add() diesem.$store.commit('Inkrement') zu.
    })
  }
}

importiere { mapActions } von 'vuex'
Standard exportieren {
  //..
  Methoden: {
    ...mapActions([
      'incrementN' //Ordnen Sie this.incrementN() diesem.$store.dispatch('incrementN') zu.
    ]),
    ...mapActions({
      hinzufügen: 'incrementN' //Ordnen Sie this.add() diesem.$store.dispatch('incrementN') zu.
    })
  }
}

<Vorlage>
  <div align="center" style="Hintergrundfarbe: bisque;">
    <p>Nachfolgend erfahren Sie, wie Sie mit computed die Statusdaten direkt in Geschäften abrufen und bei einer Änderung der Statusdaten synchron aktualisieren können.</p>
    <h1>Berechneten Wert verwenden, um Status abzurufen: {{ computedState }}</h1>
    <h1>Verwenden Sie Calculated, um Getter zu erhalten: {{ computedGetters }}</h1>
  </div>
</Vorlage>
<Skript>
  importiere { mapState,mapGetters } von 'vuex' //Führe mapState,mapGetters-Objekte ein exportiere default {
    Name: 'ComputeShow',
    berechnet:{
    ...mapState({
      berechneterZustand:'Anzahl' //Alias: berechneterZustand
    }),
    ...mapGetters({
      computedGetters:'getChangeValue' //Alias: computedGetters
    })
    }
  }
</Skript>
<Stil>
</Stil>

<Vorlage>
  <div ausrichten="zentrieren">
    <Eingabetyp="Zahl" v-Modell="ParamWert" />
    <button @click="addNum({res: parseInt(paramValue)})">+Erhöhen</button>
    <button @click="subNum">-Verringern</button>
  </div>
</Vorlage>
<Skript>
  importieren {
    Kartenmutationen,
    Kartenaktionen
  } von 'vuex' //mapMutations einführen, mapActions-Objekte standardmäßig exportieren {
    Name: 'CountChange',
    Daten() {
      zurückkehren {
        Parameterwert: 1,
      }
    },
    Methoden: {
      ...mapMutations({
        subNum: 'sub' //Alias ​​subNum hinzufügen
      }),
      ...mapActions({
        addNum: 'increment' //Ordnen Sie this.incrementN() diesem.$store.dispatch('incrementN') zu.
      })
    }
  }
</Skript>
<Stil>
</Stil>