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学习使用

目录
相关文章
|
7月前
|
前端开发 JavaScript
react学习(Effect)
react学习(Effect)
89 3
|
前端开发 JavaScript BI
轻松搞定vue3+Pinia-2-修改state-patch-actions
轻松搞定vue3+Pinia-2-修改state-patch-actions
256 0
|
2月前
|
JavaScript 数据处理
Vuex 的Mutation 和 Action 有什么区别?
【10月更文挑战第15天】Mutation 和 Action 在 Vuex 中都有着重要的作用,它们相互协作,共同实现了 Vuex 状态管理的功能。理解它们的区别与联系,并在实际应用中正确使用,对于构建高效、可靠的 Vue 应用具有重要意义。
|
2月前
|
监控 JavaScript
Vuex学习二:Vuex的重点属性学习,state、mutations、getters、actions、module。
这篇文章是关于Vuex状态管理库的深入学习,涵盖了其核心概念如state、getters、mutations、actions和modules,并通过实例代码展示了它们的使用和重要性。
36 1
|
4月前
|
JavaScript
Redux 中定义 Action
【8月更文挑战第30天】
62 0
|
4月前
|
存储 JavaScript 前端开发
Redux 中的 Reducer 和 Action
【8月更文挑战第31天】
66 0
|
5月前
|
存储 JavaScript
VUEX 的使用学习二: state
VUEX 的使用学习二: state
37 0
|
7月前
|
JavaScript 前端开发
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
408 2
|
前端开发
react学习案例14-store,action,reducer
react学习案例14-store,action,reducer
52 0
react学习案例14-store,action,reducer
|
存储 JavaScript 前端开发
react 进阶hook 之 Effect Hook
在效果图中,ui是会先出现的,然后我们的title值才会从 viteApp 改成 title 0,所以可以证明 effect的执行时间点是在等ui 渲染之后再来进行执行的,并且打印我会优先effect会优先输出。也就是异步执行