vuex 的基本使用(四) Action的两种使用方式和携带参数

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

触发 action 的第一种方式 this.$store.dispatch()

在store/index.js中 使用
这里通过定时器来模拟一个异步任务

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state) {
      state.count++
    }
  },
  actions: {
    // 在 actions 中不能直接修改 state 的数据 必须通过 context.commit() 触发某个 mutation 才行
    addAsync (context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  },
})

在页面中触发

handleBtnAddAsync () {
  // 这里的 disptach 函数 专门用来触发 action
  this.$store.dispatch('addAsync')
},
// @click="handleBtnAddAsync"这里相当于另起一个方法调用 也可以直接 @click="addAsync"

触发 action 异步任务携带参数

在store/index.js中 接收参数

...省略引用
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addN (state, step) {
      state.count += step
    }
  },
  actions: {
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }
  }
})

在 页面中触发 传递参数

handleBtnAddAsyncN () {
   this.$store.dispatch('addNAsync', 5)
 }
 // @click="handleBtnAddAsyncN"这里相当于另起一个方法调用 也可以直接 @click="addNAsync(5)"

触发 action 的第二种方式 mapActions

// 从vuex中按需导入 mapActions 函数
import {mapActions} from 'vuex'
// 将指定的 actions 函数 映射为当前组件的 methods 函数
methods:{
    ...mapActions(['addN']),
    addAsync () {
      this.subAsync()
    }
}

@click="handleBtnSubAsync"这里相当于另起一个方法调用 也可以直接 @click="addN"