Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erklärung der vuex2.0-Module

小云云
Freigeben: 2018-01-16 13:05:34
Original
2299 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Module von vuex2.0 vor. Der Herausgeber findet ihn ziemlich gut. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Was ist ein Modul?

Hintergrund: Der Status in Vue verwendet eine einzelne Statusbaumstruktur, und alle Status sollten im Status platziert werden. Wenn das Projekt komplexer ist, handelt es sich bei dem Status um ein großes Objekt Das Objekt wird außerdem sehr groß und schwer zu verwalten.

Modul: Jedes Modul kann seinen eigenen Status, seine eigene Mutation, seine eigene Aktion und seine eigenen Getter haben, wodurch die Struktur sehr klar und einfach zu verwalten ist.

Wie verwende ich das Modul?

Allgemeine Struktur


const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }

const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})
Nach dem Login kopieren

Daten innerhalb des Moduls: ①Interner Zustand, der Zustand innerhalb des Moduls ist lokal B. die Listendaten im Modulstatus car.js, müssen wir über this.$store.state.car.list abrufen. ② Interne Getter, Mutationen und Aktionen sind weiterhin im registriert globaler Namespace, damit mehrere Module gleichzeitig auf dieselbe Mutation reagieren können. Das Ergebnis von this.$store.state.car.carGetter ist undefiniert und kann über this.$store.state.carGetter abgerufen werden.

Übergabe von Parametern: getters====({state(local state),getters(global getters object),roosState(root state)}); actions====({state(local status), commit, roosState (root state)}).

Erstellen Sie ein neues Projekt, um es zu erleben, erstellen Sie ein neues Projekt vuemodule über vue –cli, vergessen Sie nicht, vuex zu installieren.

1, im src-Verzeichnis Erstellen Sie einen neuen Anmeldeordner und erstellen Sie darin index.js, um den Status des Anmeldemoduls zu speichern. Der Einfachheit halber habe ich alle Zustände, Aktionen, Mutationen und Getter unter dem Modul in der Datei index.js abgelegt.

Fügen Sie zunächst einfach einen Status hinzu, Benutzername: „sam“


const state = {
  useName: "sam"
};
const mutations = {

};
const actions = {

};
const getters = {

};

// 不要忘记把state, mutations等暴露出去。
export default {
  state,
  mutations,
  actions,
  getters
}
Nach dem Login kopieren

2. Erstellen Sie eine neue Datei „store.js“ im src-Verzeichnis ist der Stammspeicher, der das Anmeldemodul über das Modulattribut importiert.


import Vue from "vue";
import Vuex from "Vuex";

Vue.use(Vuex);

// 引入login 模块
import login from "./login"

export default new Vuex.Store({
  // 通过modules属性引入login 模块。
  modules: {
    login: login
  }
})
Nach dem Login kopieren

3. Store in main.js einführen und in die Vue-Root-Instanz einfügen.


import Vue from 'vue'
import App from './App.vue'

// 引入store
import store from "./store"

new Vue({
 el: '#app',
 store, // 注入到根实例中。
 render: h => h(App)
})
Nach dem Login kopieren

4. Rufen Sie den Status unter login über das berechnete Attribut in app.vue ab. Beachten Sie hier, dass die Komponente diesen .$store übergibt .state.Der Attributname kann abgerufen werden, aber nachdem Module vorhanden sind, ist der Status auf den Login-Namespace (Modul) beschränkt, daher muss der Modulname (Namespace) vor dem Attributnamen und this.$store hinzugefügt werden wird in der Komponente übergeben. .state.Module name.Attribute name, hier ist der Status, der erfolgreich von this.$store.state.login.userName


<template>
 <p id="app">
  <img src="./assets/logo.png">
  <h1>{{useName}}</h1>
 </p>
</template>

<script>
export default {
 // computed属性,从store 中获取状态state,不要忘记login命名空间。
 computed: {
  useName: function() {
   return this.$store.state.login.useName
  }
 }
}
</script>
Nach dem Login kopieren

erhalten wurde Komponente. Das Projektverzeichnis und die Anzeige lauten wie folgt:

4. Ändern Sie den Namen durch Aktionen und Mutationen. Dies beinhaltet Versandaktionen, Commit-Mutationen und Mutationen, um den Status zu ändern.

Fügen Sie zunächst die Aktion „changeName“ und die Mutationen „CHANGE_NAME“ im Anmeldeordner index.js hinzu.


const mutations = {
  CHANGE_NAME (state, anotherName) {
    state.useName = anotherName;
  }
};

const actions = {
  changeName ({commit},anotherName) {
    commit("CHANGE_NAME", anotherName)
  }
};
Nach dem Login kopieren

Fügen Sie eine Schaltfläche in app.vue hinzu:

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage