2025年Vuex中的mutaion,action

科技前沿 • 2025-04-10 09:10 • 阅读 39

大家好，我是讯享网，很高兴认识大家。

Mutation用于变更Store中的数据

提交更新数据的方法,必须是同步的(如果需要异步使用action)

1.只能通过mutation变更store数据,不可以直接操作Store中的数据

2.通过这个方式虽然操作起来稍微繁琐一些,但是可以集中监听所有数据的变化

注意:里面不要执行异步操作

//定义mutation const store = new Vuex.Store({ 
    state:{ 
    count:0 }, mutations:{ 
    //第一个参数是state对象 add(state){ 
    //变更状态 state.count++ } } })

讯享网

第一种触发:

讯享网//触发mutation methods:{ 
    aa(){ 
    //add是mutation里面的方法 this.$store.commit('add') } }

可以在触发mutation时传递参数

//定义mutation const store = new Vuex.Store({ 
    state:{ 
    count:0 }, mutations:{ 
    //第一个参数是state对象 //va自定义的参数  add(state,va){ 
    //变更状态 state.count += va } } })

讯享网//触发mutation methods:{ 
    aa(){ 
    //add是mutation里面的方法 //携带参数 2 this.$store.commit('add',2) } }

第二种触发:
1.从 vuex中按需导入mapMutations 函数
import {mapMutations} from 'vuex’
2. 将制定的mutations函数,映射为当前组件的methods函数中

讯享网

methods:{ 
    ...mapMutations(['add','ooo']) }

commit:用来触发mutation里面方法用的
this.$store.commit(‘mutations方法名’,值)

action

和mutation功能大致相同,不同之处在与action提交的是mutation,而不是直接变更状态,可以包含异步操作

用于处理异步任务

如果通过异步操作变更数据,必须通过action,而不能使用mutation,但是在action中还是要通过触发mutation的方式间接变更数据

讯享网//定义action const store = new Vuex.Store({ 
    state:{ 
    count:0 }, mutations:{ 
    add(state){ 
    state.count++ } }, actions:{ 
    //第一个参数是context addAsync(context){ 
    setTimeout(()=>{ 
    context.commit('add') },1000) } } })

触发action
1.从 vuex中按需导入mapActions 函数
import {mapActions} from ‘vuex’
2. 将制定的mapActions函数,映射为当前组件的methods函数中

methods:{ 
    ...mapAction(['addAsync']) }

dispatch:用来触发action里面的方法

讯享网//定义action const store = new Vuex.Store({ 
    state:{ 
    count:0 }, mutations:{ 
    add(state,num){ 
    state.count+=num } }, actions:{ 
    //第一个参数是context addAsync(context,num){ 
    setTimeout(()=>{ 
    context.commit('add',num) },1000) } } })

methods:{ 
    abc(){ 
    //addAsynce 是actions里面的方法 //this.$store.dispatch('addAsynce',值) this.$store.dispatch('addAsynce',4) } }

下一章详细讲解Getter,Modules,感谢观看

2025年Vuex中的mutaion,action

Mutation用于变更Store中的数据

action

相关推荐