Vuex为什么要使用actions——差异化展示3步骤

首先要安装插件：vue.js devtools

首先看项目目录：

项目通过vue创建，添加的vue-router和vuex两个插件。

通过三步骤展示：Vuex为什么要使用actions

下面是差异化操作步骤：

为什么要使用actions-差异化展示第1步：在index.js里面添加方法，模拟异步
为什么要使用actions-差异化展示第2步：在About.vue里面添加异步按钮
为什么要使用actions-差异化展示第3步：在About.vue里面设置异步方法

为什么要使用actions-差异化展示第1步：在index.js里面添加方法，模拟异步

store/index.js代码：

// store/index.js内容

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0  //1.在index.js里面设置count.
  },
  getters: {
  },
  mutations: {  //7.在/store/index.js里面设置修改状态。
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    },
    incrementAsync(state){ //为什么要使用actions-差异化展示第1步：在index.js里面添加方法，模拟异步
      setTimeout(()=>{
        state.count++;
      },1000);
    }
  },
  actions: {  //6.在/store/index.js里面设置Increment和decrement方法。
    increment({commit}){
      commit('increment')
    },
    decrement({commit}){
      commit('decrement')
    }
  },
  modules: {
  }
})


//vuex的基本使用8步骤——等同于购物车里面的数量增减：
//1.在index.js里面设置count。
//2.在About.vue里面设置count的计算属性。
//3.在About.vue里面设置显示count。
//4.在About.vue里面设置+1和-1按钮。
//5.在About.vue里面设置声明increment和decrement方法。
//6.在/store/index.js里面设置Increment和decrement方法。
//7.在/store/index.js里面设置修改状态。
//8.在App.vue上设置使用。


//为什么要使用actions-差异化展示第1步：在index.js里面添加方法，模拟异步
//为什么要使用actions-差异化展示第2步：在About.vue里面添加异步按钮
//为什么要使用actions-差异化展示第3步：在About.vue里面设置异步方法

为什么要使用actions-差异化展示第2步：在About.vue里面添加异步按钮
为什么要使用actions-差异化展示第3步：在About.vue里面设置异步方法

About.vue代码：

// About.vue内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{count}} <!-- //3.在About.vue里面设置显示count。 -->
    <button @click="increment">+1</button>  <!-- //4.在About.vue里面设置+1和-1按钮。 -->
    <button @click="decrement">-1</button>
    <button @click="incrementAsync">+1异步</button>  <!-- //为什么要使用actions-差异化展示第2步：在About.vue里面添加异步按钮 -->
  </div>
</template>
<script>
  export default{
    computed:{  //2.在About.vue里面设置count的计算属性。
      count(){
        return this.$store.state.count;
      }
    },
    methods:{ //5.在About.vue里面设置声明increment和decrement方法。
      increment(){
        this.$store.commit('increment');
      },
      decrement(){
        this.$store.commit('decrement');
      },
      incrementAsync(){  //为什么要使用actions-差异化展示第3步：在About.vue里面设置异步方法
        this.$store.commit('incrementAsync');
      }
    }
  }
</script>

运行结果可以看出，异步+1，监听到的结果count始终比前端展示的少1.

 

 上面的代码经过简单的修改即可实现监控的count值，在+1异步时实现同步的效果：

只需要在store/index.js里面做简单的修改：

// store/index.js内容

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0  
  },
  getters: {
  },
  mutations: {  
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    },
    // incrementAsync(state){ 
    //   setTimeout(()=>{
    //     state.count++;
    //   },1000);
    // }
    incrementAsync(state){  //为什么要使用actions-同步化第1步：
      state.count++;
    }
  },
  actions: {  
    increment({commit}){
      commit('increment')
    },
    decrement({commit}){
      commit('decrement')
    },
    incrementAsync({commit}){  //为什么要使用actions-同步化第2步：
      setTimeout(()=>{
        commit('incrementAsync');
      },1000);
    }
  },
  modules: {
  }
})


//只需要两步修改即可实现同步：
//为什么要使用actions-同步化第1步：
//为什么要使用actions-同步化第2步

运行结果如下：