第4章 Vue全家桶(vue-router+vuex)- 4.18 vuex为什么要使用actions——异步起到同步的作用

此文请结合：第4章 Vue全家桶(vue-router+vuex)- 4.18 为什么要使用actions查看。

index.js代码：

// store/index.js内容

import Vue from 'vue'
//1.导入模块
import Vuex from 'vuex'

//2.使用当前的插件
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {  //当前的状态
    count:0   //vuex的基本使用第一步：设置数量count.
  },
  getters: {  //store的计算属性
  },
  mutations: {  //声明同步的方法，只能是同步方法。
    increment(state){ //vuex的基本使用第七步：修改状态。
      //修改状态
      state.count++
    },
    decrement(state){
      state.count--
    },
    // incrementAsync(state){ //为什么要使用actions-差异化展示第1步：在index.js里面添加方法，模拟异步
    //   setTimeout(()=>{
    //     state.count++;
    //   },1000);
    // }
    incrementAsync(state){  //为什么要使用actions-同步化第1步：
      state.count++;
    }
  },
  actions: {  //声明异步的方法
    // increment({commit}){   //vuex的基本使用第六步：声明Increment方法
    //   //commit mutations中声明的方法
    //   //修改状态的唯一方法是提交mutation
    //   commit('increment')
    // },
    // decrement({commit}){
    //   commit('decrement')
    // }

    incrementAsync({commit}){ //为什么要使用actions-同步化第2步：
      setTimeout(()=>{
        commit('incrementAsync');
      },1000);
    }
  },
  modules: {
  }
})
export default store;


//4.17 vuex的其本使用8步骤：
//vuex的基本使用第1步：在/store/index.js里面设置数量count.
//vuex的基本使用第2步：在About.vue里面设置计算属性的值。
//vuex的基本使用第3步：在About.vue里面设置显示count。
//vuex的基本使用第4步：在About.vue里面设置+1按钮
//vuex的基本使用第5步：在About.vue里面设置声明increment方法
//vuex的基本使用第6步：在/store/index.js里面设置Increment方法
//vuex的基本使用第7步：在/store/index.js里面设置修改状态。
//vuex的基本使用第8步：在App.vue上设置使用。


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


//4.18为什么要使用actions-同步化展示2步：
//为什么要使用actions-同步化第1步：
//为什么要使用actions-同步化第2步：

运行结果：