vue自定义全局loading组件

loading.vue 

在vuex中定义一个modules为loading.js

import {SHOW_LOADING,HIDE_LOADING} from '../types'

const state = {
  status: false
}

const mutations = {
  [SHOW_LOADING](state){
    state.status=true
  },
  [HIDE_LOADING](state){
    state.status=false
  }
}

export default {
  state,
  mutations
}

定义type.js

export const SHOW_LOADING = 'SHOW_LOADING' //显示loading
export const HIDE_LOADING = 'HIDE_LOADING' //隐藏loading

定义action.js

export const showLoading = ({ commit }) => {
  commit(types.SHOW_LOADING);
};

export const hideLoading = ({ commit }) => {
  commit(types.HIDE_LOADING);
};

定义store的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as actions from './actions'

Vue.use(Vuex);

import loading from './modules/loading'

export default new Vuex.Store({
  getters,
  actions,
  modules:{
    loading,
  }
})

接下来就可以使用store.dispatch('showLoading')和store.dispatch('hideLoading')来出发换个关闭loading组件

个人博客：jilezhainanshe.com