接上文mutations里的异步问题,在Vue Component 和 mutations之间增加actions环节,使用actions替代Vue Component 提交(commit)mutations
{{ $store.state.student }}
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
{{ $store.state.counter }}
以对象的形式映射methods
App.vue 将increment1 映射到 actions
{{ $store.state.counter }}
actions同样可以接收参数
export default {
Aincrement(context,payload){
setTimeout(() => {
context.commit('increment',payload)
}, 1000);
}
}
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
{{ $store.state.counter }}