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],
  }),
},
// ...