uniapp全局调用自定义loading框或toast消息；

uniapp全局调用自定义loading框或toast消息；

全局调用主要依靠vuex状态管理，实现思路大致是：在自定义loading组件中监听vuex（vuex-uniapp官方文档）中的loadingState当前的显示或隐藏状态，在自定义loading组件中监听到vuex中的状态发生改变时，调用loading组件中控制显示隐藏的方法即可。此时在页面中即可直接修改vuex中的状态从而致使页面显示隐藏自定义loading或toast；美中不足就是需要用到loading的组件中要注册一下组件；

自定义loading组件

<script>
//映射vuex中控制loading显示隐藏的状态到此组件
import { mapState } from "vuex";
export default {
  data() {
    return {
      show: false,
    };
  },
  computed: {
    ...mapState(["loadingState"]),
  },
  watch: {
    // 监听vuex中的loadingState变化
    loadingState(newVal, oldVal) {
      if (newVal) {
        this.open();
      } else {
        this.close();
      }
      // console.log(newVal, oldVal, "监听到loadingState变化");
    },
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
  },
};
</script>

vuex

const store = new Vuex.Store({
    state: {
        loadingState: false,//loading 显示隐藏
    },
    mutations: {
        showLoading(state) {
            state.loadingState = true;
        },
        hideLoading(state) {
            state.loadingState = false;
        }
    }
})
// 到上面这一步其实已经可以使用了，但是为了方便，使用了uni.$emit和uni.$on来全局监听

App.vue

//在onLaunch时，监听全局自定义事件，这样在页面组件或者.js文件中可以直接uni.$emit自定义事件来控制显示隐藏，这样就不需要在用到loading的页面中映射vuex的数据了
<script>
import store from "@/store/index.js";
export default {
  onLaunch: function () {
    // 监听自定义loading的显示与隐藏方法
    uni.$on("showLoading", ()=>{store.commit("showLoading")});
    uni.$on("hideLoading", ()=>{store.commit("hideLoading")});
  },
};
</script>

调用

uni.$emit('showLoading');
uni.$emit('hideLoading');

Tips:虽然直接在父组件中引入loading子组件然后调用loading中的方法也可以实现，但是抛去每次要给组件绑定ref再通过ref控制组件不说，如果直接引入子组件不通过vuex控制，那么在项目的某个.js文件中，是无法控制自定义loading或toast的显示隐藏，上面所描述的方法解决了此问题，在.js文件中也可调用。示例代码中直接控制了显示隐藏，实际使用中通过vuex控制时携带参数，可以实现更丰富的自定义loading或toast。

永远相信美好的事情即将发生。