Sample code for using Loading components in vue project

What is a vue plugin?

Functionally speaking, plug-ins are a mechanism to add global functions to Vue, such as adding a global component, global directive, etc. to Vue;

From the code structure, a plug-in is an object that must have the install method. The first parameter received by this method is the Vue constructor, and it can also receive an optional parameter to configure the plug-in:

var myplugin = {
install:function(Vue, options){
...
}
}

In a sense, just as jQuery's $.fn has given jQuery a huge ecosystem, Vue's plug-in mechanism has enabled Vue to form an ecosystem where you can develop a plug-in for others to reuse.

Loding time of transition data is often used when requesting a background interface in a vue project.

If loading is a global loading state, it should be written in the project

<template>
  <div >
    <router-view></router-view>
    <loading v-if='LOADING'/> //Own packaged loading component  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

This Loading component is hidden through the status display of LOADING. We hope that when requesting an interface, we will change LOADING to true and change it to false after the interface requests, so that the transition effect of loading can be achieved.

But there is a problem here. The display and hiding of the loading component are controlled by LOADING. If LOADING is directly defined in , it is very troublesome to directly modify LOADING in each request, so it is recommended to use vuex

Step 1: According to the example of the official website, create a new file in the same level directory.

// 
const store = new ({
  state: {
    LOADING: false
  },
  mutations: {
    showLoading(state){
       = true  
    },
    hideLoading (state) {
       = false
    }
  }
})

Step 2: Introduce it in and mount it on the Vue Activity

import store from './store'

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

Step 3: Change the status of LOADING in the request

There are many API request methods in Vue projects. If the project is simple and the data volume is small, you can directly use post/get requests such as axios, ajax, request, etc. on the page. Take axios as an example:

methods：{
  // Usually requests are expected to be asynchronous to facilitate data operation  async test(){
    this.$('showLoading')
    // Here you need to mount axios on Vue's properties in advance.    await this.$('xxx/xxxx/xxx')
    this.$('hideLoading')
  }
}

Step 4: Listen to LOADING status

In Vuex, state is updated dynamically, that is, no matter where the value of a certain state is modified, the DOM that depends on the data will also change. Modify the file and listen for changes in the value of LOADING.

<template>
  <div >
    <router-view></router-view>
    <loading v-if='LOADING'/> //Own packaged loading component  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    computed:{
      ...mapState([
        'LOADING'
      ])
    },
    name: 'App'
  }
</script>

Summarize:

The most fundamental thing about loading’s transition effect is to control the display and hiding of loading components through state. Make the status true before requesting the interface, and change it to false after the interface is completed.

Simple loading component。

A simple loading component should have a mask layer, an over-animation, or a loading description.

<template>
  <section>
    <div class='mock'>
      <div class='main'>
        loading...
      </div>
    </div>
  </section>
</template>  
<style>
  section{
    width:100vh;
    height:100vh;
    position:relative;
  }
  .mock{
    tion{
    width:100vh;
    height:100vh;
    position:absolute;
     z-index:100;
    background-color:#abb2bf;
  }
  .main{
    margin:200px auto;
    text-align:center:
  }
</style>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.