Beispieldemonstration der Vuex-Modularisierung und Namespaces

const countAbout = {
  namespaced:true, //Namespace-Status öffnen:{x:1},
  Mutationen: { ... },
  Aktionen: { ... },
  Getter: {
    großeSumme(Zustand){
       returniere Zustandssumme * 10
    }
  }
}

const personAbout = {
  namespaced:true, //Namespace-Status öffnen:{ ... },
  Mutationen: { ... },
  Aktionen: { ... }
}

const store = neuer Vuex.Store({
  Module:
    countÜber,
    personÜber
  }
})

//Methode 1: Lesen Sie this.$store.state.personAbout.list direkt


//Methode 2: Lesen mit mapState:
...mapState('countAbout',['Summe','Schule','Fach']),

//Methode 1: Lesen Sie this.$store.getters['personAbout/firstPersonName'] direkt

//Methode 2: Lesen mit MapGetters:
…mapGetters('AnzahlAbschnitt',['große Summe'])

//Methode 1: direkt versenden
dies.$store.dispatch('personAbout/addPersonWang',person)


//Methode 2: Mit mapActions:
…mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

//Methode 1: direkt committen
dies.$store.commit('personAbout/ADD_PERSON',person)


//Methode 2: Mit mapMutations:
…mapMutations('countAbout',{Erhöhung:'JIA',Verminderung:'JIAN'}),

//Vue vorstellen
Vue von „vue“ importieren
//App vorstellen
App aus „./App.vue“ importieren
//Shop vorstellen
Store aus „./store“ importieren

//Vues Produktionsaufforderung deaktivieren Vue.config.productionTip = false

//VM erstellen
neuer Vue({
	el:'#app',
	rendern: h => h(App),
	speichern,
	vorErstellen() {
		Vue.prototype.$bus = dies
	}
})

<Vorlage>
	<div>
		<Anzahl/>
		<hr>
		<Person/>
	</div>
</Vorlage>

<Skript>
	Importiere Count aus './components/Count'
	Person aus './components/Person' importieren

	Standard exportieren {
		Name: „App“,
		Komponenten: {Anzahl, Person},
	}
</Skript>

//Diese Datei wird verwendet, um den Kernspeicher in Vuex zu erstellen
Vue von „vue“ importieren
//Vuex vorstellen
Vuex von „vuex“ importieren
importiere Zähloptionen aus './count'
importiere personOptions aus './person'
//Vuex-Plugin anwenden Vue.use(Vuex)

//Store erstellen und bereitstellen
exportiere standardmäßig neuen Vuex.Store({
	Module: {
		AnzahlInfo:AnzahlOptionen,
		personÜber:personOptionen
	}
})

//Summe der zugehörigen Konfiguration export default {
	Namespace: wahr,
	Aktionen: {
		jiaOdd(Kontext,Wert){
			console.log('jiaOdd wird in Aktionen aufgerufen')
			wenn(Kontext.Zustand.Summe % 2){
				Kontext.Commit('JIA',Wert)
			}
		},
		jiaWait(Kontext,Wert){
			console.log('jiaWait in Aktionen wird aufgerufen')
			setzeTimeout(()=>{
				Kontext.Commit('JIA',Wert)
			},500)
		}
	},
	Mutationen:
		JIA(Zustand,Wert){
			console.log('JIA in Mutationen wird aufgerufen')
			Zustandssumme += Wert
		},
		JIAN(Zustand,Wert){
			console.log('JIAN wird in Mutationen aufgerufen')
			state.sum -= Wert
		},
	},
	Zustand:{
		sum:0, //Aktuelle Summe Schule:'Shang Silicon Valley',
		Betreff: 'Frontend',
	},
	Getter: {
		großeSumme(Zustand){
			returniere Zustandssumme*10
		}
	},
}

//Personalverwaltungsbezogene Konfiguration importiere Axios von 'Axios'
importiere { nanoid } von 'nanoid'
Standard exportieren {
	Namespace: wahr,
	Aktionen: {
		addPersonWang(Kontext,Wert){
			wenn(Wert.Name.Index von('Name') === 0){
				Kontext.commit('ADD_PERSON',Wert)
			}anders{
				alert('Die hinzugefügte Person muss den Nachnamen Wang haben!')
			}
		},
		addPersonServer(Kontext){
			axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
				Antwort => {
					Kontext.commit('PERSON HINZUFÜGEN',{id:nanoid(),name:response.data})
				},
				Fehler => {
					Alarm(Fehlermeldung)
				}
			)
		}
	},
	Mutationen:
		ADD_PERSON(Staat,Wert){
			console.log('ADD_PERSON wird in Mutationen aufgerufen')
			Status.Personenliste.Unshift(Wert)
		}
	},
	Zustand:{
		Personenliste:[
			{id:'001',name:'Nicht zutreffend'}
		]
	},
	Getter: {
		Vorname(Bundesland){
			returniere Staat.Personenliste[0].Name
		}
	},
}

<Vorlage>
	<div>
		<h1>Aktuelle Summe: {{sum}}</h1>
		<h3>Die aktuelle Summe wird 10-fach vergrößert: {{bigSum}}</h3>
		<h3>Ich bin in {{school}} und studiere {{subject}}</h3>
		<h3 style="color:red">Die Gesamtzahl der Personen in der Person-Komponente beträgt: {{personList.length}}</h3>
		<v-Modellnummer auswählen="n">
			<optionswert="1">1</option>
			<optionswert="2">2</option>
			<optionswert="3">3</option>
		</Auswählen>
		<button @click="Erhöhen(n)">+</button>
		<button @click="dekrementieren(n)">-</button>
		<button @click="incrementOdd(n)">Addieren, wenn die aktuelle Summe eine ungerade Zahl ist</button>
		<button @click="incrementWait(n)">Vor dem Hinzufügen eine Weile warten</button>
	</div>
</Vorlage>

<Skript>
	importiere {mapState,mapGetters,mapMutations,mapActions} von 'vuex'
	Standard exportieren {
		Name: 'Anzahl',
		Daten() {
			zurückkehren {
				n:1, //vom Benutzer gewählte Nummer }
		},
		berechnet:{
			//Mithilfe von mapState berechnete Eigenschaften generieren und Daten aus dem Status lesen. (Array-Schreiben)
			...mapState('countAbout',['Summe','Schule','Fach']),
			...mapState('personAbout',['personList']),
			//Mithilfe von MapGettern berechnete Eigenschaften generieren und Daten aus Gettern lesen. (Array-Schreiben)
			…mapGetters('AnzahlAbschnitt',['große Summe'])
		},
		Methoden: {
			//Mithilfe von mapMutations die entsprechende Methode generieren, die das Commit zum Kontaktieren von Mutationen aufruft (Objektschreiben)
			…mapMutations('countAbout',{Erhöhung:'JIA',Verminderung:'JIAN'}),
			//Mithilfe von mapActions die entsprechende Methode generieren, die Dispatch an Kontaktaktionen aufruft (Objektschreiben)
			…mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},
		montiert() {
			Konsole.log(diesen.$store)
		},
	}
</Skript>

<style lang="css">
	Taste{
		Rand links: 5px;
	}
</Stil>

<Vorlage>
	<div>
		<h1>Mitarbeiterliste</h1>
		<h3 style="color:red">Die Summe der Count-Komponente ist: {{sum}}</h3>
		<h3>Die erste Person in der Liste hat den Namen: {{firstPersonName}}</h3>
		<input type="text" placeholder="Bitte geben Sie Ihren Namen ein" v-model="name">
		<button @click="add">Hinzufügen</button>
		<button @click="addWang">Fügen Sie eine Person mit dem Nachnamen Wang hinzu</button>
		<button @click="addPersonServer">Fügen Sie eine Person mit einem zufälligen Namen hinzu</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{{p.name}}</li>
		</ul>
	</div>
</Vorlage>

<Skript>
	importiere {nanoid} von 'nanoid'
	Standard exportieren {
		Name: „Person“,
		Daten() {
			zurückkehren {
				Name:''
			}
		},
		berechnet:{
			personList(){
				gib dies zurück.$store.state.personAbout.personList
			},
			Summe(){
				gib dies zurück.$store.state.countAbout.sum
			},
			VornameName(){
				gib dies zurück.$store.getters['personAbout/firstPersonName']
			}
		},
		Methoden: {
			hinzufügen(){
				const personObj = {id:nanoid(),name:dieser.name}
				dies.$store.commit('personAbout/ADD_PERSON',personObj)
				dieser.name = ''
			},
			addWang(){
				const personObj = {id:nanoid(),name:dieser.name}
				dies.$store.dispatch('personAbout/addPersonWang',personObj)
				dieser.name = ''
			},
			addPersonServer(){
				dies.$store.dispatch('personAbout/addPersonServer')
			}
		},
	}
</Skript>