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

目录
相关文章
|
4月前
|
JavaScript 开发者
Vue状态管理: 在Vuex中,什么是mutation?它们应该如何使用?
Vue状态管理: 在Vuex中,什么是mutation?它们应该如何使用?
97 4
|
10月前
|
前端开发 JavaScript BI
轻松搞定vue3+Pinia-2-修改state-patch-actions
轻松搞定vue3+Pinia-2-修改state-patch-actions
216 0
|
4月前
|
前端开发 数据处理 开发者
vuex中mutations详解,与actions的区别
Vuex 的 Mutations 是用于改变 Vuex Store 中状态的一种方式。它是一个同步的操作,用于直接修改 Store 中的状态。
|
17天前
|
JavaScript
Redux 中定义 Action
【8月更文挑战第30天】
28 0
|
17天前
|
存储 JavaScript 前端开发
Redux 中的 Reducer 和 Action
【8月更文挑战第31天】
20 0
|
2月前
|
存储 JavaScript
VUEX 的使用学习二: state
VUEX 的使用学习二: state
26 0
|
4月前
|
JavaScript
vuex如何在actions中传递参数
在Vuex的`actions`中传递参数可以提高其灵活性和复用性。
|
4月前
|
JavaScript
如何在Vuex中定义和使用getters和actions
在Vuex中,`getters`用于派生状态值,类似Vue的计算属性,例如从`todos`状态中过滤已完成/未完成任务。`actions`则处理异步操作,如模拟加载数据,通过`commit`改变状态。
|
4月前
|
JavaScript 前端开发 测试技术
vuex中Actions详解
- Actions 是 Vuex 中的一个重要概念,用于处理异步操作和触发mutations。 - Actions 可以包含任意的 JavaScript 逻辑,包括异步操作(如发送 AJAX 请求)。 - Actions 通过调用 store.dispatch 方法来触发mutations。
|
4月前
|
JavaScript 前端开发
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
258 2