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: {}
})

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/>'
})

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

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>




















posted @ 2018-02-28 17:08  minimissile  阅读(11247)  评论(0)  编辑  收藏  举报