actions

接上文mutations里的异步问题，在Vue Component 和 mutations之间增加actions环节，使用actions替代Vue Component 提交（commit）mutations

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    student: {
      age: 18,
      name: 'haha'
    }
  },
  mutations: {
   updateStudent(state,payload) {
      state.student.name = payload
    }
  },
  actions:{
    AUpdateStudent(context,payload){ //context 上下文 --- 这里可以理解为store对象  ,actions同样可以接收payload
      console.log(payload)
      setTimeout(()=>{
        context.commit('updateStudent',payload)
      },1000)
    }
  }

})
export default store

image.png

对象的解构在这里方便使用

  actions: {
    AUpdateStudent({state,commit,rootState}, payload) {
      setTimeout(() => {
        context.commit('updateStudent', payload)
      }, 1000)
    }
  }

mapActions

actions.js

export default {
  Aincrement(context){
    setTimeout(() => {
       context.commit('increment',1) 
    }, 1000);
  }
}

store

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
    counter: 10
  },
  mutations: {
    increment(state, payload) {
      state.counter += payload
    }
  },
  actions

})
export default store

App.vue

以对象的形式映射methods
App.vue 将increment1 映射到 actions

actions同样可以接收参数

export default {
  Aincrement(context,payload){
    setTimeout(() => {
       context.commit('increment',payload) 
    }, 1000);
  }
}

异步增加1

  methods: {
    ...mapActions(['Aincrement'])
  }

Actions通常针对异步操作，如何监听异步操作成功？使用promise
actions.js

export default {
  Aincrement(context,payload){
    return new Promise((resolve,reject)=>{
      setTimeout(() => {
        context.commit('increment',payload) 
        resolve(111)
     }, 1000);
    })
   
  }
}

store

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
    counter: 10
  },
  mutations: {
    increment(state, payload) {
      state.counter += payload
    }
  },
  actions

})
export default store

App.vue