vuex Loding加载..

最新推荐文章于 2025-03-26 01:54:48 发布

weixin_30348519

最新推荐文章于 2025-03-26 01:54:48 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liangfengbo/p/7524175.html

本文介绍如何使用Vuex进行加载状态的管理，包括定义状态、更新状态的方法以及如何在组件中展示加载状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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