vue-actions

utilities for vuex2

Installation

npm install vue-actions --save

actionCreator()

// store/modules/products.js
import { actionCreator , mutationCreator } from 'vue-actions'

const state = {
  list : []
};

const getters = {}

export const actions = {
  getProducts: actionCreator('GET_PRODUCTS', ({ commit }, payload) => {
    return ProductAPI.getList({
      pageSize: payload.size,
      pageIndex: payload.index
    }) // API return promise
  })
};

export const mutations = mutationCreator((on)=>{
  on(actions.getProducts,(state, )=>{
    state.list = []
  });

  on.success(actions.getProducts,(state,res)=>{
    console.log('get products success', res)
    state.list = res.data || []
  });

  on.fail(actions.getProducts,(state,sssss)=>{
    console.log('get products fail',sssss)
  });
});

export default {
  state,
  getters,
  actions,
  mutations
}

mapPending version >= 2.3.0

import vueActions, { mapPending } from 'vue-actions'
import { actions as prodoctActions } from '@/store/modules/product'

Vue.use(vueActions)  // install vueActions first

// ...
computed: {
  ...mapPending({
    loading1: prodoctActions.getProducts,
    loading2: [prodoctActions.getProducts, prodoctActions.other],
  }),
},
// ...