Vuex-Verbesserungs-Lernaustausch

Dieser Artikel stellt hauptsächlich das Kapitel zum Vuex-Verbesserungslernen vor. Der Herausgeber findet es ziemlich gut. Ich werde es jetzt mit Ihnen teilen und es als Referenz geben. Folgen wir dem Herausgeber und werfen wir einen Blick darauf. Ich hoffe, es kann allen helfen.

Im vorherigen Artikel haben wir darüber gesprochen, wie man die Datenobjekte in store.js durch einige einfache Aktionen ändert. In der tatsächlichen Arbeit ist dies völlig ungeeignet, daher werden wir in diesem Artikel darüber sprechen Wie man einige einfache Prozessurteile trifft.

Selbstgemachtes vuex-LOGO

1. Bei Zählung < Stoppen Sie die Zählung--. Dies erfordert Aktionen

Aktionen zur Definition der auszuführenden Aktionen, wie z. B. Prozessbeurteilung und asynchrone Anfragen

in den Aktionen in store.js

// 定义 actions ，要执行的动作，如流程的判断、异步请求
const actions ={
  increment({commit,state}){
    commit('increment') 
  },
  decrement({ commit, state }) {
    // **通过动作改变的数据，在此处来做判断是否提交**
    if (state.count > 5) {
      commit('decrement')
    }
  }
}

Führen Sie das Projekt aus

2. Simulieren Sie asynchrone Anforderungen durch Aktionen

1 das Ereignis in App.vue

<template>
 <p id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  //异步请求事件
  <button @click="incrementAsync">异步增加</button>
  <h1>{{count}}</h1>
 </p>
</template>

<script>
import {mapGetters,mapActions} from &#39;vuex&#39;
export default {
 name: &#39;app&#39;,
 computed:mapGetters([
  &#39;count&#39;
 ]),
 methods:mapActions([
  &#39;increment&#39;,
  &#39;decrement&#39;,
  &#39;incrementAsync&#39;
 ])
}
</script>

2. Fügen Sie das asynchrone Promise-Ereignis

< in den Aktionen in store.js 🎜> hinzu

// 定义 actions ，要执行的动作，如流程的判断、异步请求
const actions ={
  increment({commit,state}){
    commit('increment') 
  },
  decrement({ commit, state }) {
    // **通过动作改变的数据，在此处来做判断是否提交**
    if (state.count > 5) {
      commit('decrement')
    }
  },
  incrementAsync({commit,state}){
    // 模拟异步操作
    var a = new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve();
      }, 3000);
    })
    // 3 秒之后提交一次 increment ，也就是执行一次 increment 
    a.then(() => {
      commit('increment')
    }).catch(() => {
      console.log('异步操作失败');
    })
  }
}

Führen Sie das Projekt aus

3. Holen Sie sich den Datenstatus

Wenn wir es wissen müssen Die ungeraden und geraden Zahlen der Daten müssen in Gettern beurteilt werden.

Getter können verarbeitete Daten abrufen, um den Status zu bestimmen

Fügen Sie eine Methode hinzu, um ungerade und gerade Zahlen in den Gettern von store.js zu bestimmen

var getters={
  count(state){
    return state.count
  },
  EvenOrOdd(state){
    return state.count%2==0 ? '偶数' : '奇数'
  }
}

Fügen Sie

<template>
 <p id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  <button @click="incrementAsync">异步增加</button>
  <h1>{{count}}</h1>
  <!-- 判断奇偶数的方法 这种写法它会自动调用 EvenOrOdd 方法中的返回值，拿到的是个属性 -->
  <h1>{{EvenOrOdd}}</h1>
 </p>
</template>

<script>
import {mapGetters,mapActions} from &#39;vuex&#39;
export default {
 name: &#39;app&#39;,
 computed:mapGetters([
  // 判断奇偶数的方法
  &#39;EvenOrOdd&#39;,
  &#39;count&#39;
 ]),
 methods:mapActions([
  &#39;increment&#39;,
  &#39;decrement&#39;,
  &#39;incrementAsync&#39;
 ])
}
</script>

hinzu, um ungerade und gerade Zahlen zu bestimmen.gif

Wenn Sie etwas nicht verstehen, hinterlassen Sie bitte eine Nachricht zur Diskussion oder durchsuchen Sie direkt die API

Verwandte Empfehlungen:

Basierend auf Vue, Vuex, Vue-Router implementiert Animationsumschaltfunktion

Über die Familien-Bucket-Statusverwaltung von Vuex

Vuex-Konzeptverständnis und praktische Tutorials

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