Verwendung des Vuex-Namespace

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

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

})

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");

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

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

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

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