03-Vuex基础--actions

Vuex中actions主要是存放异步修改state数据的方法，需要调用mutations去修改state中的数据。

 actions: {
    // 存放异步修改state数据的方法
    // context 相当于组件中的this.$store ====>store的运行实例
    UpdateCount (context) {
      setTimeout(() => {
        // 模拟异步请求 ，得到一个值
        context.commit('addCount')
      }, 2000)
    }

  }

普通调用：

    // 普通调用----actions
    add2 () {
      this.$store.dispatch('UpdateCount')
    }

传参调用：

  add2 () {
      this.$store.dispatch('UpdateCount', 30)
    }

 辅助函数调用--mapActions

store文件夹目录下index.js文件中

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

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    // 管理数据
    count: 0
  },
  mutations: {
    // 参数1：表示当前store的state属性
    // 参数2： payload 载荷 运输参数 在调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state, playload) {
      state.count += playload
    }
  },
  actions: {
    // 存放异步修改state数据的方法
    // context 相当于组件中的this.$store ====>store的运行实例
    UpdateCount (context, params) {
      setTimeout(() => {
        // 模拟异步请求 ，得到一个值
        context.commit('addCount', params)
      }, 2000)
    }

  }
})

导入

import {  mapActions } from 'vuex'

 调用

    // 辅助函数调用actions
    ...mapActions(['UpdateCount'])

 使用

    <button @click="UpdateCount(100)">辅助函数异步修改state</button>