Item request is automatically set to a state vue

When entering a page, usually at the same time access to data, will first display a loading, and other end of the request and then hide loadingrendering the page, just use a property to record the status of the request, according to the state to re-render the page just fine

async handler() {
    this.loading = true
    await fetch()
    this.loading = false
}
复制代码

Although it is very simple function, but the place to be processed more time, still very complicated, I can not think of a unified set of processes the request loading, then the page according to loadingthe state decide what to display, based on his idea to do Some package automatically to all ajaxrequests setting loadingstate, the main idea is to concentrate all requests to a single instance, by proxya proxy access attribute, the loadingsubmitted state to storethe statein

installation

$ npm install vue-ajax-loading
复制代码

Show

Online demo (open slower)

use

• And mutations store the configuration state

import { loadingState, loadingMutations } from 'vue-ajax-loading'

const store = new Vuex.Store({
    state: {
        ...loadingState
    },
    mutations: {
        ...loadingMutations
    }
})
复制代码

• All the requests concentrate on an object

import { ajaxLoading } from 'vue-ajax-loading'
import axios from 'axios'
import store from '../store' // Vuex.Store 创建的实例

axios.defaults.baseURL = 'https://cnodejs.org/api/v1'

// 把请求集中到单一对象上，如：
const service = {
    global: {
        // 全局的请求
        getTopics() {
            return axios.get('/topics')
        },
        getTopicById(id = '5433d5e4e737cbe96dcef312') {
            return axios.get(`/topic/${id}`)
        }
    },
    modules: {
        // 有命名空间的请求，命名空间就是 topic
        topic: {
            getTopics() {
                return axios.get('/topics')
            },
            getTopicById(id = '5433d5e4e737cbe96dcef312') {
                return axios.get(`/topic/${id}`)
            }
        }
    }
}

export default ajaxLoading({
    store,
    service
})
复制代码

After the above configuration, by the above export defaultout of the object to send a request, will automatically set the status of the request, may then be within the assembly this.$store.state.loadingor this.$loadingto access request status, such as:

<el-button type="primary" :loading="$loading.getTopics" @click="handler1">getTopics</el-button>
<el-button type="primary" :loading="$loading.delay" @click="delay">定时两秒</el-button>
<el-button type="primary" :loading="$loading.topic.getTopics" @click="handler3">topic.getTopics</el-button>
复制代码

import api from 'path/to/api'

export default {
    methods: {
        handler1() {
            api.getTopics()
        },
        handler3() {
            api.topic.getTopics()
        },
        delay() {
            api.delay()
        }
    }
}
复制代码

Options

store

Examples Vuex.Store created

service

Object contains all requests can be configured globaland modulesproperties

• global: global scope request can be set to an object or an array of objects
• modules: Request with namespace, type of the object , property name is the namespace

loadingProp

Mount to Vue.prototypethe property name on the default is$loading

github address

Reproduced in: https: //juejin.im/post/5cfb5fbd51882506400069ae