actions 和 mutations的本质区别

为什么actions 做异步处理

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
// import Vuex from '@/vuex'

// 会默认调用 Vuex 的 install 方法

// Vue.use方法的简单实现
// Vue.use = function(plugin, options) {
//   plugin.install(Vue, options)
// }
Vue.use(Vuex)

// Vuex是一个对象，里面有一个大写的Store和install方法
export default new Vuex.Store({
  state: {
    count: 1,
    // 注意，如果state中的属性和模块同名，后面的会覆盖前面的，导致无法取到这个值
    a: 'a'
  },
  getters: {
    getCount(state) {
      return state.count + 1
    }
  },
  mutations: {
    changeCount(state, payload) {
      state.count += payload 
    }
  },
  actions: {
    changeCount({ commit }, payload) {
      setTimeout(() => {
        commit('changeCount', payload)
      }, 1000)
    }
  },
  modules: {
    a: {
      namespaced: true,
      state: {
        name: 'f',
        count: 18
      },
      mutations: {
        changeCount(state, payload) {
          state.count += payload 
        }
      }
    },
    b: {
      namespaced: true,
      state: {
        name: 'g',
        count: 17
      },
      mutations: {
        changeCount(state, payload) {
          state.count += payload 
        }
      }
    }
  }
})

// src/App.vue
<template>
  <div id="app">
    <div>
      count:{{$store.state.count}}
    </div>
    <!-- getters里面的未发生变化的情况下，多次调用getters里面的值，只需执行一次，节省性能 -->
    <div>
      gettter:{{$store.getters.getCount}}
    </div>
    <div>
      gettter:{{$store.getters.getCount}}
    </div>
    <div>
      gettter:{{$store.getters.getCount}}
    </div>
    <button @click="$store.state.count = 10">不合规改变state</button>

    <!-- 不要直接修改state的值，因为一个state的值可能被多个组件使用，如果在某个组件里直接修改这个state的值，会影响到其他组件，不利于查找数据的改变来源。 -->
    <button @click="$store.state.count = 10">不合规改变state</button>

    <button @click="$store.commit('changeCount', 10)">同步加{{$store.state.count}}</button>

    <button @click="$store.dispatch('changeCount', 100)">异步加{{$store.state.count}}</button>

    <!-- 模块中没有对mutations进行划分，导致修改上面的mutations值，模块中的值也会发生变化,这个问题需要给模块设置 namespaced: true 来避免 -->
    <div>
      <!-- a/changeCount 调用a模块下的changeCount -->
      <button @click="$store.commit('a/changeCount', 10)">a模块count同步加{{$store.state.a.count}}</button>
      a模块中name的值{{$store.state.a.name}} count:{{$store.state.b.count}}
    </div>
    <div>
      <button @click="$store.commit('b/changeCount', 10)">b模块count同步加{{$store.state.b.count}}</button>
      b模块中name的值{{$store.state.b.name}} count:{{$store.state.b.count}}
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$store)
  }
}
</script>