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