VUEX 使用学习四 : action

vuex,使用,学习,action · 浏览次数 : 45

小编点评

**转载内容：** 1. **action 用于处理异步任务**； 2. **action，可以操作任意的异步操作，类似于mutations，但是是替代mutations来进行异步操作的。** 3. **mutations中必须是同步方法，如果使用了异步，虽然页面上的内容改变了，但实际上Vuex.Store没有监听到数据的更新** 4. **通过异步操作变更数据，必须通过Action，而不能使用Mutation，在Action中还是要通过触发 Mutation的方式间接变更数据** 5. **this.$store.dispatch 是触发actions的第一种方式** //定义store.js 中定义action actions: { addAsync(context) { setTimeout(()=> { context.commit('add') },1000) } }** 6. **从vuex中按需求导入mapState函数** import {maptActions} from 'vuex' 7. **将指定的mutations函数，映射为当前组件的methods函数** methods:{ ...maptActions(['addAsync']) } 8. **在网上找到一个demo 示例，可参考学习：** https://gitee.com/xiangbaxiang/vue-store

正文

转载请注明出处：

　　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