Vuex中mutation为什么是同步的action为什么是异步

最近在回顾vue的相关知识点的时候,学习Vuex的时候,发现一个问题,为什么在Vuex中mutation是同步的,而action却是异步的呢?

一、 什么是Vuex

在了解mutation与action之前我们先了解一下什么是Vuex 以及Vuex的作用是什么?

官方文档这样解释:

Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex是一个状态集中管理器,解决多组件之间的数据通信,数据是可预测的(响应式的)。

Vuex有5个重要的概念

state:存储公共数据(相当于组件中的data)
mutations:修改数据方法的集合,必须是同步
getters:类似于computed计算属性(利用现有的状态进项计算得到新的数据---派生)
actions:异步操作
modules:模块化拆分
Vuex中mutation为什么是同步的action为什么是异步_第1张图片

如上图所示:左边是我们vue的组件,虚线框内是vuex,里面有一个state就是我们要所需要的数据,我们现在要修改数据的话需要一定的流程:

  1. 我们需要在组件里面调用dispatch() 方法提交Actions

  1. Actions 再通过commit方法提交mutations

  1. 通过mutations 里面的方法修改state(数据)

  1. 最后render到组件里面

actions与mutation包含的都是一些方法,但是不同的是actions不能直接修改数据,它的作用是提交mutations,mutation里面包含的才是具体操作数据的方法,在Vuex中是唯一一个能够修改数据的方法就是提交 mutation

二、mutations 与Actions的区别

经过上面的解说,我们知道mutation与action里面放的都是方法,但是mutation与action具体有哪些区别呢?

  • 首先action与mutation都可以改变state中数据的状态,但是action可以处理异步函数可以在devtools中追踪数据变化,而mutation只可以处理同步函数,当处理异步函数的时候检测不到数据变化

那么是否有人好奇,为什么mutation进行异步操作的时候,为什么页面发生变化了,但是devtools中为什么检测不到数据的变化,而action为什么就可以呢?

下面我们就来探索一下:

为什么mutation必须是同步函数,actions 可以处理异步函数

mutations:{
   someMutation (state) {
      api.callAsyncMethod(() => {
        state.count++
       })
   }
}

如果我们在mutation中写了异步,commit在触发mutation事件时,异步的回调函数不知道是什么时候执行的,所以在devtools中难以追踪变化

actions 可以做异步操作,但是并不是直接修改数据,而是通过提交mutations 里面的方法

actions: {
  setStoreData ({ commit }) {
    mockData().then((res)=>{
    commit('storeData',res)
      })
    }
},

mutations:{
 storeData(state,payload){
    state.data = state.data.concat(payload)
   }
}

在页面中触发actions

methods:{
    handleData(){
        this.$store.dispatch('setStoreData')
    }
}

这样在devetools就可以追踪到状态的变化

你可能感兴趣的:(vue,vue.js,javascript,前端)