Der vollständige Leitfaden zum Mapping in Vuex

Vuex ist ein zweischneidiges Schwert. Bei richtiger Anwendung kann der Einsatz von Vue Ihre Arbeit erleichtern. Es kann auch Ihren Code überladen, wenn Sie nicht aufpassen.

Bevor Sie Vuex verwenden, sollten Sie zunächst vier Hauptkonzepte verstehen: Zustand, Getter, Mutation und Aktion. Ein einfacher Vuex-Status manipuliert Daten innerhalb dieser Konzepte im Store. Karten in Vuex bieten eine großartige Möglichkeit, Daten daraus abzurufen.

In diesem Artikel werde ich zeigen, wie man Daten im Vuex-Speicher zuordnet. Wenn Sie mit den Vuex-Grundlagen vertraut sind, hilft Ihnen dieser Inhalt dabei, saubereren und wartbareren Code zu schreiben.

In diesem Artikel wird davon ausgegangen, dass Sie die Grundlagen von Vue.js und Vuex kennen.

Was ist Mapping in Vuex?

Mit Karten in Vuex können Sie jede Art von Eigenschaft im Zustand (Zustand, Getter, Mutation und Aktion) an eine berechnete Eigenschaft in einer Komponente binden und die Daten im Zustand direkt verwenden.

Nachfolgend finden Sie ein einfaches Beispiel für einen Vuex-Store, in dem sich Testdaten im Status befinden.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: "test data"
  }
})

Wenn Sie über den Status auf den Wert von data zugreifen möchten, können Sie in der Vue.js-Komponente Folgendes tun. data 的值，则可以在 Vue.js 组件中执行以下操作。

computed: {
        getData(){
          return this.$store.state.data
        }
    }

上面的代码可以工作，但是随着 state 数据量的开始增长，很快就会变得很难看。

例如：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: {
        id:1,
        age:23,
        role:user
        data:{
          name:"user name",
          address:"user address"
        }
    },
    services: {},
    medical_requests: {},
    appointments: {},
    }
  }
})

要从处于 state 中的用户对象获取用户名：

computed: {
        getUserName(){
          return this.$store.state.user.data.name
        }
    }

这样可以完成工作，但是还有更好的方法。

映射 state

要将 state 映射到 Vue.js 组件中的计算属性，可以运行以下命令。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
        ])
    }
}

现在你可以访问组件中的整个用户对象。

你还可以做更多的事，例如把对象从 state 添加到 mapState 方法。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
            'services'
        ])
    }
}

如你所见，这要干净得多。可以通过以下方式轻松访问用户名：

{{user.data.name}}

services 对象和映射的许多其他的值也是如此。

你注意到我们是如何将数组传递给 mapState() 的吗？如果需要为值指定其他名称，则可以传入一个对象。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState({
            userDetails:'user',
            userServices:'services'
        })
    }
}

现在可以通过简单地调用 userDetails 来引用 user。

何时映射整个 state

根据经验，仅当 state 中有大量数据，并且组件中全部需要它们时，才应该映射。

在上面的例子中，如果我们只需要一个值（例如 username），则映射整个用户对象就没有多大意义。

在映射时，整个对象将会全部加载到内存中。实际上我们并不想继续把不需要的数据加载到内存中，因为这将是多余的，并且从长远来看会影响性能。

映射 getter

映射 getter 的语法与 mapState 函数相似。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'firstCount',
      'anotherGetter',
    ])
  }
}

与映射 state 类似，如果你打算使用其他名称，则可以把对象传递给 mapGetters 函数。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      first:'firstCount',
      another:'anotherGetter',
    ])
  }
}

映射 mutation

映射 Mutation 时，可以在用以下语法来提交 Mutation。

this.$store.commit('mutationName`)

例如：

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`

      // `mapMutations` 也支持 payloads:
      'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`
    ]),
    ...mapMutations({
      find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`
    })
  }
}

映射 action

映射 action 与映射 mutation 非常相似，因为它也可以在方法中完成。使用映射器会把 this.$store.dispatch('actionName')

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`

      // `mapActions` 也支持 payloads:
      'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
    })
  }
}

Der obige Code funktioniert, aber wenn die Menge der Statusdaten zunimmt, wird er schnell hässlich.

Zum Beispiel:

rrreee

So erhalten Sie den Benutzernamen vom Benutzerobjekt im Status:

rrreee
• Damit ist die Aufgabe erledigt, aber es gibt einen besseren Weg.
  Status zuordnen
• Um den Status einer berechneten Eigenschaft in einer Vue.js-Komponente zuzuordnen, können Sie den folgenden Befehl ausführen.
rrreee
• Jetzt haben Sie Zugriff auf das gesamte Benutzerobjekt in der Komponente.
  Sie können noch mehr tun, z. B. Objekte aus dem Status zur Methode mapState hinzufügen.
rrreee

Wie Sie sehen, ist das viel sauberer. Auf den Benutzernamen kann einfach zugegriffen werden über:

rrreee

services, ebenso wie viele andere Werte des Objekts und der Karte.

Ist Ihnen aufgefallen, wie wir das Array an mapState() übergeben haben? Wenn Sie dem Wert einen anderen Namen geben müssen, können Sie ein Objekt übergeben.

rrreee

Es ist jetzt möglich, auf user zu verweisen, indem einfach userDetails aufgerufen wird.

Wann der gesamte Bundesstaat abgebildet werden soll

Als Faustregel sollten Sie nur dann eine Zuordnung durchführen, wenn im Bundesstaat viele Daten vorhanden sind und diese alle in der Komponente benötigt werden.

Im obigen Beispiel macht die Zuordnung des gesamten Benutzerobjekts wenig Sinn, wenn wir nur einen Wert benötigen (z. B. username).

Während des Mappings wird das gesamte Objekt in den Speicher geladen. Eigentlich möchten wir nicht ständig unnötige Daten in den Speicher laden, da dies überflüssig ist und sich auf lange Sicht auf die Leistung auswirkt.

Map-Getter

Die Syntax des Mapping-Getters ähnelt der Funktion mapState.

rrreee

Ähnlich wie beim Mapping-Status können Sie das Objekt an die Funktion mapGetters übergeben, wenn Sie einen anderen Namen verwenden möchten. rrreeeMap-Mutation

Beim Mapping von Mutation können Sie die folgende Syntax verwenden, um Mutation zu übermitteln. 🎜rrreee🎜Zum Beispiel: 🎜rrreee🎜Map-Aktion🎜🎜Mapping-Aktion ist der Mapping-Mutation insofern sehr ähnlich, als sie auch in einer Methode durchgeführt werden kann. Durch die Verwendung eines Mappers wird this.$store.dispatch('actionName') an den Namen oder Schlüssel des Objekts im Mapper-Array gebunden. 🎜rrreee🎜Zusammenfassung🎜🎜Nachdem Sie dies gesehen haben, sollten Sie in der Lage sein, Folgendes zu lernen:🎜🎜🎜🎜Ein tiefes Verständnis dafür haben, wie Mapping in Vuex funktioniert und warum Sie es verwenden sollten🎜🎜🎜In der Lage sein, alle Komponenten im Vuex-Store zuzuordnen (Zustand, Getter, Mutation, Aktion)🎜🎜🎜Wissen, wann der Store zugeordnet werden soll🎜🎜🎜🎜🎜Englische Originaladresse: https://blog.logrocket.com/a-complete-guide-to-mapping-in- vuex /🎜🎜Autor: Moses Anumadu🎜🎜🎜🎜Verwandte Empfehlungen: 🎜🎜🎜🎜Zusammenfassung der Front-End-Vue-Interviewfragen 2020 (mit Antworten) 🎜🎜🎜🎜Vue-Tutorial-Empfehlung: 2020 neueste 5 vue.js-Video-Tutorial-Auswahl 🎜🎜 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜🎜

Das obige ist der detaillierte Inhalt vonDer vollständige Leitfaden zum Mapping in Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!