为什么要用Action管理异步操作?

Action 类似于 mutation，不同在于：

1.Action 提交的是 mutation，而不是直接变更状态。

2.Action 可以包含任意异步操作。

官方给的定义我没什么意见,事实上我通过mutation异步操作,好像跟用action管理也没什么区别。关于为什么要用Action管理异步操作，我会通过一个简单的例子和一个复杂的例子来进行说明，事实上，如果初学者没有考虑到实际场景的复杂情况，会觉得Action根本没有一点软用，这个时候就要把问题想得复杂一些了，然后才能看到Action的作用。

先来看一个简单的例子，也是我对如果不用Action进行异步操作的一些初步探索。

第一步：我非常作死的重写了mutation状态管理器中对状态操作的一些写法，我使用了异步操作代替了之前的操作。

// mutation.js
const increment = (state) => {
   
  setTimeout(() => {
   
    state.count++
  }, 1000)
}
const decrement = (state) => {
   
  setTimeout(() => {
   
    state.count--
  }, 2000)
  state.count--
}
export {
   increment, decrement}

第二步：试验一下能否成功

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{
   {
   count}}</span>
    <button @click="increment">+</button>
  </div>
</template>
 
<script>
import {
    mapState, mapMutations} from 'vuex'
export default {
   
  computed: {
   
    ...mapState