Vuex ---Actions 异步修改
actions
action提交的是mutation,而不是直接变更状态
action可以包含任意异步操作
actions里面是放的我们的函数,函数里面的参数context,可以帮我们提交mutations
**逻辑梳理:**到时候在组件内部,调用actions之后,actions里面又去调用mutations,而mutations又去修改了state。
mutations:{
increate(state){ //payload:携带参数
state.counter++
}
},
actions:{
//放函数de,
increateAction(context){
context.commit("increate")
}
}
如何在组件中调用actions?
<template>
<div>
<button @click="increatet"></button>
</div>
</template>
<script>
export default {
methods:{
// 在点击的时候去分发我们的actions
increatet(){
this.$store.dispatch("increateAction")
}
}
}
</script>
Actions 在compositionAPI 的使用方法:
import {useStore} from 'vuex'
import {onMounted} from "vue"
export default {
setup(){
const store=useStore()
onMounted(() => {
store.dispatch("getHomeMutidata")
}),
return{
}
}