vue全局loading组件

本组件作用在页面加载完成前进行loader提示，提升用户体验，只需要在app.vue中引用一次，整个项目中路由切换时就可以自动进行提示(vuex版)；

1. 添加vuex值和方法；

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    // 控制loading显示隐藏
    updateLoadingStatus(state, payload) {
      state.isLoading = payload.isLoading
    }
  },
  getters: {},
  actions: {}
})

19

19

 

1

import Vue from 'vue'

2

import Vuex from 'vuex'

3

4

Vue.use(Vuex)

5

6

export default new Vuex.Store({

7

  state: {

8

    isLoading: false

9

  },

10

  mutations: {

11

    // 控制loading显示隐藏

12

    updateLoadingStatus(state, payload) {

13

      state.isLoading = payload.isLoading

14

    }

15

  },

16

  getters: {},

17

  actions: {}

18

})

19

2. 将vuex添加到vue实例中供全局调用

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

15

15

 

1

import Vue from 'vue'

2

import App from './App'

3

import router from './router'

4

import store from './store'

5

6

Vue.config.productionTip = false

7

8

/* eslint-disable no-new */

9

new Vue({

10

  el: '#app',

11

  router,

12

  store,

13

  components: { App },

14

  template: '<App/>'

15

})

3. 修改vue-router，利用router事件钩子，操作控制loader组件的值

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
]

// 实例化路由
const router = new Router({
  routes
})

// 路由跳转前的钩子
router.beforeEach(function (to, from, next) {
  store.commit('updateLoadingStatus', {isLoading: true})
  next()
})

// 路由跳转后的钩子
router.afterEach(function (to) {
  store.commit('updateLoadingStatus', {isLoading: false})
})

export default router

32

32

 

1

import Vue from 'vue'

2

import Router from 'vue-router'

3

import store from '../store/index'

4

import HelloWorld from '@/components/HelloWorld'

5

6

Vue.use(Router)

7

8

const routes = [

9

  {

10

    path: '/',

11

    name: 'HelloWorld',

12

    component: HelloWorld

13

  }

14

]

15

16

// 实例化路由

17

const router = new Router({

18

  routes

19

})

20

21

// 路由跳转前的钩子

22

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

23

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

24

  next()

25

})

26

27

// 路由跳转后的钩子

28

router.afterEach(function (to) {

29

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

30

})

31

32

export default router

4. 在app.js中使用loader组件，最需要注意的一点，控制组件显示的变量，需要通过v-model来与组件绑定（如下第六行）

<template>
  <div id="app">
    {{isLoading}}
    <img src="./assets/logo.png">
    <router-view/>
    <loading v-model="isLoading"></loading>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import loading from './components/loading/loading.vue'

  export default {
    name: 'App',
    components: {
      loading
    },
    computed: {
      ...mapState({
        isLoading: state => state.isLoading
      })
    }
  }
</script>

25

 

1

<template>

2

  <div id="app">

3

    {{isLoading}}

4

    <img src="./assets/logo.png">

5

    <router-view/>

6

    <loading v-model="isLoading"></loading>

7

  </div>

8

</template>

9

10

<script>

11

  import {mapState} from 'vuex'

12

  import loading from './components/loading/loading.vue'

13

14

  export default {

15

    name: 'App',

16

    components: {

17

      loading

18

    },

19

    computed: {

20

      ...mapState({

21

        isLoading: state => state.isLoading

22

      })

23

    }

24

  }

25

</script>