调用action时,应该使用$store.commit(actionname,payload)来进行
时间: 2024-01-31 18:04:36 浏览: 26
不太对,实际上,在调用action时,应该使用`$store.dispatch(actionName, payload)`方法来进行,而不是使用`$store.commit(actionName, payload)`。
`$store.dispatch(actionName, payload)`用于触发action,action会接收一个与store实例具有相同方法和属性的context对象,包括`state`、`getters`、`commit`、`dispatch`等,我们可以在action中通过context对象调用commit方法来触发mutation来修改状态。
而`$store.commit(mutationName, payload)`用于触发mutation,mutation的作用是直接修改state,而不是异步操作,因此我们不能在mutation中进行异步操作。同时,由于mutation是同步的,所以不应该在组件中直接调用commit方法,而应该通过action来间接调用mutation。
下面是一个调用action的示例代码:
```javascript
// 定义一个store
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
asyncIncrement(context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
}
})
// 在组件中使用
this.$store.dispatch('asyncIncrement')
```
在上面的代码中,我们定义了一个名为asyncIncrement的action,它通过setTimeout来模拟一个异步操作,当异步操作完成后,再通过commit方法来提交mutation来修改state。在组件中,我们可以通过dispatch方法来触发asyncIncrement action。