Verwendung des Vuex-Namespace

Inhaltsverzeichnis

Da Vuex einen einzelnen Zustandsbaum verwendet, werden alle Anwendungszustände in einem relativ großen Objekt konzentriert. Wenn Ihre Anwendung sehr komplex wird, kann das Store-Objekt ziemlich aufgebläht werden.

Daher ermöglicht uns Vuex, den Store in Module aufzuteilen, von denen jedes seinen eigenen Status, seine eigene Mutation, Aktion, seinen eigenen Getter und sogar verschachtelte Untermodule hat.

Standardmäßig werden Aktionen, Mutationen und Getter innerhalb eines Moduls im globalen Namespace registriert, sodass mehrere Module auf dieselbe Mutation oder Aktion reagieren können. Wenn Sie für Ihr Modul eine höhere Kapselung und Wiederverwendbarkeit wünschen, wird das Namespace-Konzept verwendet.

{
    "Modul 1":{
        Zustand:{},
        Getter:{},
        Mutationen:{},
        Aktionen:{}
    },
    "Modul 2":{
        Zustand:{},
        Getter:{},
        Mutationen:{},
        Aktionen:{}
    }
}

Der erste Parameter von mapState, mapGetters, mapMutations und mapActions ist eine Zeichenfolge (Namespace-Name) und der zweite Parameter ist ein Array (muss nicht umbenannt werden)/Objekt (muss umbenannt werden).

mapXXXs('Namespacename',['Attributname 1','Attributname 2'])

mapXXXs('Namespace-Name',{

  'Neuer Name 1 in Komponente': 'Ursprünglicher Name 1 in Vuex',

  'Neuer Name 2 in Komponente': 'Ursprünglicher Name 2 in Vuex',

})

Projektstruktur

mian.js

importiere Vue von „vue“;
App aus "./App.vue" importieren;
Router aus "./router" importieren;
Store aus "./store/index" importieren;

Vue.config.productionTip = falsch;

neuer Vue({
  Router,
  speichern,
  rendern: h => h(App)
}).$mount("#app");

index.js

importiere Vue von „vue“;
importiere Vuex von „vuex“;
importiere cat aus "./modules/cat";
importiere Hund aus "./modules/dog";

Vue.use(Vuex);

exportiere standardmäßig neuen Vuex.Store({
  Module: { Katze, Hund }
});

Katze.js

Standard exportieren {
  Namespace: wahr,
  // lokaler Status: {
    Name: "Blau-weiße Britisch Kurzhaar",
    Alter: 1
  },
  // Lokale Lese-Getter: {
    desc: state => "Haustier: " + state.name
  },
  // Lokale Änderungen Mutationen: {
    Inkrement(Zustand, Nutzlast) {
      Zustand.Alter += Nutzlast.Anzahl;
    }
  },
  // Lokale Aktionen actions: {
    wachsen(Kontext, Nutzlast) {
      setzeTimeout(() => {
        Kontext.commit("Inkrement", Nutzlast);
      }, 1000);
    }
  }
};

hund.js

Standard exportieren {
  Namespace: wahr,
  // lokaler Status: {
    Name: "Labrador",
    Alter: 1
  },
  // Lokale Lese-Getter: {
    desc: state => "Haustier: " + state.name
  },
  // Lokale Änderungen Mutationen: {
    Inkrement(Zustand, Nutzlast) {
      Zustand.Alter += Nutzlast.Anzahl;
    }
  },
  // Lokale Aktionen actions: {
    wachsen(Kontext, Nutzlast) {
      setzeTimeout(() => {
        Kontext.commit("Inkrement", Nutzlast);
      }, 1000);
    }
  }
};

hallo.vue

<Vorlage>
  <div Klasse="hallo">
    <h3>Vuex-Zustandsbaum</h3>
    <div>{{dieser.$store.state}}</div>
    <h3>Kartenstatus</h3>
    <div>{{catName}} {{catAge}}</div>
    <div>{{Hundename}} {{Hundealter}}</div>
    <h3>Kartengetter</h3>
    <div>{{catDesc}}</div>
    <div>{{dogDesc}}</div>
    <h3>Kartenmutationen</h3>
    <button @click="catIncrement({num:1})">Cat-Änderungen</button>
    <button @click="dogIncrement({num:1})">Hundewechsel</button>
    <h3>Kartenaktionen</h3>
    <button @click="catGrow({num:1})">Katzenaktion</button>
    <button @click="dogGrow({num:1})">Hundeaktion</button>
  </div>
</Vorlage>

<Skript>
importiere { mapState, mapGetters, mapMutations, mapActions } von „vuex“;

Standard exportieren {
  Name: "Hallo Welt",
  berechnet: {
    ...mapState("Katze", {
      catName: "Name",
      catAge: "Alter"
    }),
    ...mapState("Hund", {
      dogName: "Name",
      dogAge: "Alter"
    }),
    ...mapGetters("Katze", {
      catDesc: "Beschreibung"
    }),
    ...mapGetters("Hund", {
      dogDesc: "absteigend"
    })
  },
  Methoden: {
    ...mapMutations("Katze", { catIncrement: "Inkrement" }),
    ...mapMutations("Hund", { dogIncrement: "Inkrement" }),
    ...mapActions("Katze", { catGrow: "wachsen" }),
    ...mapActions("Hund", { dogGrow: "wachsen" })
  }
};
</Skript>

<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<style scoped lang="scss">
</Stil>

Wirkung der Operation

Dies ist das Ende dieses Artikels über die Verwendung des Vuex-Namespace. Weitere relevante Inhalte zum Vuex-Namespace finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren: