Partage d'apprentissage pour l'amélioration de Vuex-js tutoriel-php.cn

Partage d'apprentissage pour l'amélioration de Vuex

小云云

Libérer： 2018-01-13 13:13:44

original

1446 Les gens l'ont consulté

Cet article présente principalement le chapitre d'apprentissage pour l'amélioration de Vuex. L'éditeur pense qu'il est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde ?

Dans l'article précédent, nous avons expliqué comment modifier les objets de données dans store.js à travers quelques actions simples. Dans le travail réel, cela est complètement incapable de répondre aux besoins du travail, nous en parlerons donc dans cet article. comment Faire quelques jugements simples sur le processus.

LOGO vuex fait maison

1 Par exemple, j'ai une telle demande maintenant Quand compte < Arrêtez de compter.... Cela nécessite des actions

actions pour définir les actions à exécuter, telles que le jugement de processus et les requêtes asynchrones

dans les actions dans store.js

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

Copier après la connexion

Exécuter le projet

2. Simuler des requêtes asynchrones via des actions

1. l'événement dans 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>

Copier après la connexion

2. Ajoutez l'événement Promise asynchrone

< dans les actions dans store.js 🎜>

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

Copier après la connexion

Exécuter le projet

3. Obtenez l'état des données

Si nous avons besoin de savoir. les données Les nombres pairs et impairs doivent être jugés en getters.

Les getters peuvent obtenir des données traitées pour déterminer le statut

Ajouter une méthode pour déterminer les nombres pairs et impairs dans les getters de store.js

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

Copier après la connexion

Ajoutez

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

Copier après la connexion