vuex Loding加载..

技术栈：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: '加载..'})
  }
  }
}

搞定