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

搞定

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,142评论 25 708
  • ——春天的主旋律 清晨薄雾中, 学校门口的大樟树下, 叽叽喳喳热闹非凡, 是一群蹲在河边淘米的学生, ...
    春天的主旋律阅读 125评论 0 2
  • (一) G小姐和男朋友是校友,还是同一个专业,G小姐毕业一年多,男友比她早三年,两人在同一个城市的不同公司,工作性...
    聂小青阅读 2,603评论 11 46
  • 元认知能力:对自己思考过程、思维方式、思考原理的认知与理解。是用自己的大脑思考自己的思维方式、思维结果是否是合理的...
    _德成阅读 236评论 0 0
  • 她被称为“灵魂歌者”, 她的歌走心, 她的声音抚慰人心。 2017年对于郁可唯而言: 真的很不平凡! 2017年1...
    上海哆来咪阅读 503评论 0 0