Vuex improvement learning sharing

This article mainly introduces the Vuex improvement learning chapter. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let's follow the editor and take a look. I hope it can help everyone?

In the previous article we talked about how to change the data objects in store.js through some simple actions. In actual work, this is completely unable to meet the work needs, so in this article we will talk about how Make some simple process judgments.

Self-made vuex LOGO

1. For example, I have such a demand now. When count

actions to define the actions to be executed, such as process judgment and asynchronous requests

In the actions in store.js

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

Run the project

2. Simulate asynchronous requests through actions

1. First in App Define events in .vue

<template>
 <p id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  //异步请求事件
  <button @click="incrementAsync">异步增加</button>
  <h1 id="count">{{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. Add asynchronous Promise events in actions in store.js

// 定义 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('异步操作失败');
    })
  }
}

Run the project

##3. Get the data status

If we need to know the odd and even numbers of the data, then It needs to be judged in getters.

Getters can obtain processed data to determine the status

Add a method to determine odd and even numbers in the getters of store.js

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

Add

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

to App.vue to determine odd and even numbers.gif

If you don’t understand anything, please leave a message to communicate, or directly browse the API

Related recommendations:

Based on Vue, Vuex, Vue-router implementation Animation switching function

About Vuex’s family bucket status management

vuex concept understanding and practical tutorial

The above is the detailed content of Vuex improvement learning sharing. For more information, please follow other related articles on the PHP Chinese website!