axios-vuex-loading

Register a module to manage the state of ajax requests initiated by axios

Usage

npm install axios-vuex-loading --save

import loading from 'axios-vuex-loading'
import axios from './utils/request' // axios instance
import store from  './store/index' // vuex store instance

loading(axios,store[,options])

options

| name | default | description | | ---------- | :-------: | ----------------------------------------------------------------: | | moduleName | 'loading' | you can customize the vuex module name | | key | '' | you can set it to "methodURL" to change the use of key in effects |

state Structure

init state:

  state = { global: false, effects: {} }

state change process

  const serve = axios.create({
    baseURL: 'http://test.com'
  })
  serve('/goods/list')
  // start request
  state = { global: true, effects:{'/goods/list': true} }
  // end request
  state = { global: false, effects: {'/goods/list': false}}

if options.key equal to 'methodURL'

  const serve = axios.create({
    baseURL: 'http://test.com'
  })
  serve({url: 'goods/list',method: 'GET'}) // method will be lowercase
  serve({url: 'goods/create',method: 'post'})

  // start request
  state = {
    global: true,
    effects:{
      'get/goods/list': true,
      'post/goods/create': true
    }
  }
  // end request
  state = {
    global: true,
    effects:{
      'get/goods/list': false,
      'post/goods/create': false
    }
  }

get state by getter

  // index.vue
  computed:{
    ...mapGetter(loading,['global','effects'])
  }