Heim > Web-Frontend > js-Tutorial > Hauptteil

Vuex-Anwendungsfallanalyse

php中世界最好的语言
Freigeben: 2018-06-08 11:21:51
Original
1787 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine Analyse der Vuex-Anwendungsfälle und der Vorsichtsmaßnahmen für die Verwendung von Vuex vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. npm install vuex

2. Erstellen Sie einen neuen Ordnerspeicher unter src (warum wird dieses Wort verwendet? vuex wird für die Statusverwaltung verwendet. Es wird verwendet, um den Status einiger Komponenten zu speichern Rufen Sie den Speicher ab, d. h. das Lager), erstellen Sie eine neue Datei index.js unter der Speicherdatei (warum index.js? Beim Importieren wird diese Datei namens index zuerst ausgewählt)

3 vue und vuex (Import ist die Syntax von es6, es5 ist erforderlich), der Code lautet wie folgt:

Die Demo hier ist eine Bezeichnung, die den Modus der App ändert und auswählt, ob es sich um den Nachtmodus oder den Tag handelt Modus

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state: {
 night: true,
 text: '白天',
 className: 'morning'
 },
 mutations: {
 increment (state) {
  state.night = !state.night;
  state.text = state.night === true ? '晚上' : '白天';
  state.className = state.night === true ? 'night' : 'morning';
 }
 }
})
Nach dem Login kopieren

4. main.js importiert den index.js-Code wie folgt:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' // 会找index.js 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, // 注入根组件,其他子组件 都可以引用
 template: '<App/>',
 components: { App }
})
Nach dem Login kopieren

5. Vuex-Status verwenden

Komponente 1:

dom :

<p class="header" :class="model">
Nach dem Login kopieren

js

computed: {
 model() {
  return this.$store.state.className // 是ninght 还是 morning
 }
 },
Nach dem Login kopieren

Hinweis:

:class="model" Diese Klasse kann eine Methode an die Übergabe von Parametern binden, Sie können js-Ausdrücke direkt verwenden und Sie können eine binden berechnetes Attribut

Komponente 2:

dom:

<p class=&#39;modal&#39; @click="changeModel">
 <p class="avatar">
 <img src="../../assets/img/logo.png" width="18" height="18">
 </p>
 <p class="name">
 {{currentModel}}
 </p> 
 <!-- vuex 相当于全局注入 vuex 然后取这里面的值 -->
</p>
Nach dem Login kopieren

js:

computed: {
 currentModel () {
  return this.$store.state.text
 }
 },
 methods: {
 changeModel () {
  // document.body.className='night'
  this.$store.commit('increment')
 }
 }
Nach dem Login kopieren

Hinweis: currentModel in

js und {{ currentModel }} in dom gibt es eins, Und :class kann wie Ausdrucksmethoden, Variablen, Ausdrucksmethoden und Ausdrücke verwendet werden (hier ist eine flexible Vorlagenmethode, schauen Sie sich den Quellcode noch einmal an und fügen Sie dann diese Erklärung hinzu, warum Vue-Vorlagen so sind leistungsstark!)

Klicken Sie auf Ereignis, lösen Sie die Methode „changeModel“ aus, „changeModel“ löst die Mutationsmethode aus und zeigt den geänderten Wert an. Dies ist eine feste Syntax. this.$store.commit('increment');

Inkrement kann beim Definieren Parameter festlegen und Parameter übergeben , this.$store.commit('increment', 'argumnet'), in Mutation Der Screenshot von   increment (state , arg) { .. = arg; ....};

sieht wie folgt aus:

Standardmodus:

wie oben gezeigt . Der Standardwert ist der Tagesmodus, der Klassenname ist der Morgenmodus.

Klicken Sie auf den Ereignisauslösermodus. Wenn Sie erneut klicken, können Sie ihn wieder ändern. Dies ist eine logische Methode in index.js, die die Nachtvariable paarweise inkrementiert. Ähnlich wie beim Umschalten in jq,

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

Ermitteln der im Array vorhandenen Werte

So optimieren Sie das Vue-Projekt

Das obige ist der detaillierte Inhalt vonVuex-Anwendungsfallanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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