vuex状态显示和隐藏封装

最新推荐文章于 2025-11-17 16:44:26 发布

原创最新推荐文章于 2025-11-17 16:44:26 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

小组件专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用Vuex进行状态管理，重点讲解了如何通过`dispatch`和`commit`操作来显示和隐藏全局加载效果。通过实例展示了`closeGlobalLoading`和`openGlobalLoading`方法，并在main.js中进行了全局注入和页面方法实现。

状态管理显示和隐藏
在这里插入图片描述

在这里插入图片描述

const commonFn={
    // 显示和隐藏
    // dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
    // commit：同步操作，写法：this.$store.commit('mutations方法名',值)
    closeClobalLoading(){
        setTimeout(()=>{
            store.dispatch('showLoading',false)
        },0)
    },
    openGlobalLoading(){
        setTimeout(()=>{
            store.dispatch('showLoading',true)
        },0)
    },

vuex状态管理
在这里插入图片描述

// main.js引入store全局注入
import Vue from 'vue';
import Vuex from 'vuex';
import collection from './modules/collection'
import footerStatus from './modules/footerStatus'
Vue.use(Vuex);
const store = new Vuex.Store({
    modules:{
        collection,
        footerStatus
    },
    state:{ //要设置的全局访问的state对象
        // 设置初始属性值
        count:1,
        showLoading:false
    },
    getters:{ //实时监听state值的变化（最新状态）
        // 方法名随意
        getcount:state=>{
            return state.count+1
        }
    },
    mutations:{//唯一允许更改state
        showLoading(state, status) {
            state.showLoading = status
          },
        add(state,n){
            state.count=state.count+n
        },
        remove(state){
            state.count=state.count-1
        }
    },
    actions:{//触发更改
        showLoading ({ commit }, status) {
            commit('showLoading', status)
          },
        addFun(context,n){
            context.commit("add",n)
        },
        removeFun(context){
            context.commit("remove")
        }

    }
});
 
export default store;

页面显示
在这里插入图片描述

  methods: {
            // 点击显示
            showsure(){
                _g.openGlobalLoading()
            },
            // 点击影藏
            showfalse(){
            _g.closeClobalLoading()
            },
            }