Vue通过状态为页面切换添加loading、为ajax加载添加loading

以下方法需要引入vuex，另使用了vux的UI框架，ajax添加loading还引入了axios。

一、为页面切换添加loading。

　　loading.js：

import Vue from 'vue'

import Vuex from 'vuex'

import router from './router'

Vue.use(Vuex)

const store = new Vuex.Store({}) // 这里你可能已经有其他 module

store.registerModule('myVux', { // 名字自己定义

  state: {

    isLoading: false

  },

  mutations: {

    updateLoadingStatus (state, payload) {

      state.isLoading = payload.isLoading

    }

  }

})

router.beforeEach(function (to, from, next) {

  store.commit('updateLoadingStatus', {isLoading: true})

  next()

})

router.afterEach(function (to) {

  store.commit('updateLoadingStatus', {isLoading: false})

})

export default store;

　　main.js

import Vue from 'vue'

import Vuex from 'vuex'

import App from './App'

import router from './router'

import store from './loading'

Vue.use(Vuex)

Vue.use(router)

new Vue({

  el: '#app',

  router,

  store,

  template: '<App/>',

  components: {

    App

  }

})

　　App.vue:

//在模板中加入以下vux组件

<loading :text="loadText" v-model="isLoading"></loading>

  import { Loading } from 'vux'

  import { mapState } from 'vuex'

  export default {

    name: 'app',

    data(){

      return {

        loadText:"loading"

      }

    },

    components: {

      Loading

    },

    computed:{

      ...mapState({

        isLoading: state => state.myVux.isLoading

      })

    }

  }

二、为ajax添加loading（发送请求时显示，返回数据时消失）。

　　loading.js：

import Vue from 'vue'

import Vuex from 'vuex'

import Axios from 'axios'

 Vue.use(Vuex)

Axios.interceptors.request.use(config => {
  console.log('ajax begin request')
  store.commit('ajaxStar')
  return config;
})

Axios.interceptors.response.use(config => {
  console.log('ajax get response')
  store.commit('ajaxEnd')
  return config
})

store.registerModule('myVux', { // 名字自己定义
  state: {
    ajaxIsLoading: false
  },
  mutations: {
    ajaxStar (state) {
      state.ajaxIsLoading = true
    },
    ajaxEnd (state) {
      state.ajaxIsLoading = false
    }
  },
  getter : {
    ajaxIsLoading: state => state.ajaxIsLoading
  }
})

export default store;

　　main.js

import Vue from 'vue'

import Vuex from 'vuex'

import App from './App'

import router from './router'

import store from './loading'

Vue.use(Vuex)

Vue.use(router)

new Vue({

  el: '#app',

  router,

  store,

  template: '<App/>',

  components: {

    App

  }

})

　　App.vue:

//在模板中加入以下vux组件

<loading :text="loadText" v-model="ajaxIsLoading"></loading>

  import { Loading } from 'vux'

  import { mapState } from 'vuex'

  export default {

    name: 'app',

    data(){

      return {

        loadText:"loading"

      }

    },

    components: {

      Loading

    },

    computed:{

      ...mapState({

　　　　ajaxIsLoading: state => state.myVux.ajaxIsLoading

}) } }

巴特西

Vue通过状态为页面切换添加loading、为ajax加载添加loading

最新文章

热门文章