Vue/Vuex (actions) 核心概念 使用方法、辅助函数 mapActions使用方法说明

一.actions 核心概念

语法: 

//定义 --> main.js

cosnt store = new Vuex.store({
  actions: {
    action的名字: function(context, 形参载荷) {
      // 1. 发异步请求, 请求数据
    }
  }
})

//接收 --> App.vue

 this.$store.dispatch('action内函数名', 实参)

作用:

1. actions负责进行异步操作

2.在actions中提交 mutation 并且可以包含任何的异步操作 actions可以理解为通过 将mutation里面处理数据的方法变成可异步处理数据的方法 简单说: 异步操作数据 (但是通过mutation 操作 因为只有他能操作)

参数: 1. 参数一context: state 

说明: 1. dispatch: 在组件中触发 actions 方法的

为什么要有 actions:  假如你有一个数据 需要通过ajax请求来获取 然后你想存入vuex 

二. 辅助函数 mapActions

语法:

//导入

import { mapActions } from 'vuex'

//展开

methods: {
    ...mapActions(['actions内函数名'])
}

//调用

<标签 @click="actions内函数名(实参) ">  </标签>

作用: mapActions的作用 mapActions工具函数会将store中的 dispatch方法眏射到组件的 methods中

使用场景: 如果一个方法需要在多个页面和组件上使用 那么就可以使用 mapActions

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值