技术栈：vuex,mapActions, mapState

先在vuex的状态管理里定义好loding状态，以及加载文字

import Vue from 'vue';
import Vuex from 'vuex';
import router from '../router'

Vue.use(Vuex);

const store = new Vuex.Store({

  modules: {
    
    },
  state: {  

    // 加载loding
    loading: {
      status:false,
      text:''
    },

  },

  mutations: {
    
    // 修改loding状态
    updateLoadingStatus(state, status) {
      state.loading.status = status.status;
      state.loading.text = status.text;
    },
  },

  actions: {

    // 控制loding
    startLoding({state, commit},status){

      commit('updateLoadingStatus', status)
    },

  }
});

export default store;

定义好loding加载状态，那么在页面引入loding组件，我用vux组件

<loading v-model="loading.status" :text="loading.text"></loading>
import { Loading } from 'vux'
  components: {
    Loading,
  },

需要操作

import { mapActions, mapState } from 'vuex'
import { Loading } from 'vux'

export default {
  components: {
    Loading,
  },
  computed: {
    ...mapState({
      loading: state => state.loading,
    })
  },

  created() {
    this.show();
  },

  methods:{

    ...mapActions(['startLoding',]),

    show(){
        this.startLoding({status: true, text: '加载..'})
        
    },
    up(){
        this.startLoding({status: false, text: '加载..'})
    }
  }
}

搞定

image.png