• 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: '加载..'})
      	}
      }
    }
    

    搞定

  • 相关阅读:
    Arduino开发版学习计划--直流电机
    Arduino开发版学习计划--蜂鸣器
    社交网络编程API之iOS系统自带分享
    iOS解析XML实现省市区选择
    Frameworks(不定时更新)
    NSLayoutConstraint
    Categories  VS Extensions (分类 vs 扩展)
    strong vs copy
    折半查找
    Block
  • 原文地址:https://www.cnblogs.com/liangfengbo/p/7524175.html
Copyright © 2020-2023  润新知