# 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'])
  }
```