VUEX 使用学习四 : action

简介: VUEX 使用学习四 : action

转载请注明出处:

  action 用于处理异步任务;action,可以操作任意的异步操作,类似于mutations,但是是替代mutations来进行异步操作的。首先mutations中必须是同步方法,如果使用了异步,虽然页面上的内容改变了,但实际上Vuex.Store没有监听到数据的更新

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

1. this.$store.dispatch 是触发actions的第一 种方式

//定义store.js 中定义action
  actions: {
    addAsync(context) {
      setTimeout(()=> {
        context.commit('add')
      },1000)
    }
  }
//在事件方法中通过dispatch触发action
add () {
    //  触发action
    this.$store.dispatch('addAsync')
  }

  触发异步任务携带参数

mutations: {
   add(state,step) {
    state.count += step
   }
  },
  actions: {
    addAsync(context,step) {
      setTimeout(()=> {
        context.commit('add',step)
      },1000)
    }
  }
//触发action
add () {
    this.$store.dispatch('addAsync',5)
  }

2.触发actions的第二 种方式

  1.从vuex中按需求导入mapState函数

import {maptActions} from 'vuex'

  2. 将指定的mutations函数,映射为当前组件的methods函数

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

 

  在网上找到一个demo 示例,可参考学习: https://gitee.com/xiangbaxiang/vue-store

 

标签: Vue学习使用

目录
相关文章
|
8月前
|
前端开发 JavaScript
react学习(Effect)
react学习(Effect)
105 3
|
前端开发 JavaScript BI
轻松搞定vue3+Pinia-2-修改state-patch-actions
轻松搞定vue3+Pinia-2-修改state-patch-actions
266 0
|
3月前
|
JavaScript 数据处理
Vuex 的Mutation 和 Action 有什么区别?
【10月更文挑战第15天】Mutation 和 Action 在 Vuex 中都有着重要的作用,它们相互协作,共同实现了 Vuex 状态管理的功能。理解它们的区别与联系,并在实际应用中正确使用,对于构建高效、可靠的 Vue 应用具有重要意义。
|
3月前
|
监控 JavaScript
Vuex学习二:Vuex的重点属性学习,state、mutations、getters、actions、module。
这篇文章是关于Vuex状态管理库的深入学习,涵盖了其核心概念如state、getters、mutations、actions和modules,并通过实例代码展示了它们的使用和重要性。
54 1
|
5月前
|
JavaScript
Redux 中定义 Action
【8月更文挑战第30天】
72 0
|
5月前
|
存储 JavaScript 前端开发
Redux 中的 Reducer 和 Action
【8月更文挑战第31天】
84 0
|
6月前
|
存储 JavaScript
VUEX 的使用学习二: state
VUEX 的使用学习二: state
42 0
|
8月前
|
JavaScript
如何在Vuex中定义和使用getters和actions
在Vuex中,`getters`用于派生状态值,类似Vue的计算属性,例如从`todos`状态中过滤已完成/未完成任务。`actions`则处理异步操作,如模拟加载数据,通过`commit`改变状态。
|
8月前
|
JavaScript 前端开发
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
439 2
|
前端开发
react学习案例14-store,action,reducer
react学习案例14-store,action,reducer
64 0
react学习案例14-store,action,reducer