actions

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

<template>
  <div id="app">
    <h2>{{ $store.state.student }}</h2>
    <button @click="changeStudent">改变student中的name</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    changeStudent() {
      this.$store.dispatch('AUpdateStudent','我是携带的参数payload')
    }
  }
}
</script>

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

<template>
  <div id="app">
    <h2>{{ $store.state.counter }}</h2>
    <button @click="Aincrement">异步增加1</button>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'App',
  data () {
    return {}
  },
  methods: {
    ...mapActions(['Aincrement'])
  }
}
</script>

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

<template>
  <div id="app">
    <h2>{{ $store.state.counter }}</h2>
    <button @click="increment1">异步增加1</button>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'App',
  data () {
    return {}
  },
  methods: {
    ...mapActions({
      increment1: 'Aincrement'
    })
  }
}
</script>

actions同样可以接收参数

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

<button @click="Aincrement(10)">异步增加1</button>

  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

<template>
  <div id="app">
    <h2>{{ $store.state.counter }}</h2>
    <button @click="increment(10)">异步增加10</button>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'App',
  data () {
    return {}
  },
  methods: {
    ...mapActions(['Aincrement']),
    increment(count){
      this.Aincrement(count).then(res=>{
        console.log('增加完成',res)
      })
    }
  }
}
</script>