Vuex的核心概念：Action,问题呈现：计时器案例,定义Action,触发Action,触发actions异步任务时携带参数,触发actions的第二种方式 ,

头顶一只喵喵

已于 2024-03-18 17:38:02 修改

阅读量1.2k

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript vuex

于 2024-03-18 14:10:13 首次发布

本文链接：https://blog.csdn.net/zxn275266/article/details/136804076

本文介绍了在Vue.js中，如何使用Vuex进行状态管理，强调了在mutations中不能处理异步代码，转而通过actions处理异步任务。同时讲解了actions的定义、如何触发action以及两种常见的调用方式：通过`dispatch`携带参数和使用`mapActions`映射到组件方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.问题呈现：计时器案例

得出结论：在mutations函数中不能写异步的代码。

此时我们就引出了Action

Action用于处理异步任务。

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

2.定义Action

const store=new Vuex.Store({
    state:{
        count:100
    },
    mutations:{
        // 这里的step接收传递过来的参数
        add(state){
            state.count++
        }
    },
    actions:{
        // 定义了一个新的函数addAsync
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')
                //这里的commit只能调用mutations中的函数
            },1000)
        }
    }
})

3.触发Action

  //触发Action
  methods:{
    Handler1(){
      //在调用dispatch函数
      this.$store.dispatch('addAsync')
    }
  }

效果图：

4.触发actions异步任务时携带参数：

1.定义actions

const store=new Vuex.Store({
    state:{
        count:100
    },
    mutations:{
        // 这里的step接收传递过来的参数
        add(state,step){
            state.count+=step
        }
    },
    actions:{
        // 定义了一个新的函数addAsync
        addAsync(context,step){
            setTimeout(()=>{
                context.commit('add',step)
                //这里的commit只能调用mutations中的函数
            },1000)
        }
    }
})

2.触发actions

 methods:{
    Handler1(){
      //在调用dispatch函数
      this.$store.dispatch('addAsync',5)
    }
  }

效果图：

5.触发actions的第二种方式

//1.从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'

通过刚才导入的mapActions函数,将需要的actions函数，映射为当前组件的methods方法：

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

效果图：