技術棧：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: '加載..'})
}
}
}
搞定
