Vue.prototype.$Jmessage.loading('登录已过期，正在重新登陆', 0)vue2.x转化vue3.x

在Vue 2.x中，`Vue.prototype.$Jmessage`通常是一个自定义的对象或插件，它提供了一些操作消息提示的方法。如果你想在Vue 3.x中实现类似的功能，由于不再推荐直接在原型上添加属性，你可以考虑以下方式：

1. **引入库**：首先，你需要安装一个支持异步加载状态的库，如axios（用于模拟登录状态），以及一个轻量级的消息提示组件（例如vux、iview等）。

npm install axios vuex v-loading

2. **创建store**（如果之前没有）：
在Vuex store里管理登录状态和加载状态，使用actions和mutations更新状态。

// store/login.js
import { mapState, mapActions } from 'vuex';

export default {
  state: {
    loading: false,
    loginError: null,
  },
  getters: {
    isLoggedIn: mapState(['isLoggedIn']),
  },
  actions: {
    async tryLogin({ commit }, payload) {
      commit('SET_LOADING', true);
      try {
        const response = await axios.post('/login', payload);
        if (response.success) {
          // 登录成功处理
        } else {
          commit('SET_LOAD_ERROR', response.message);
        }
      } catch (error) {
        commit('SET_LOAD_ERROR', error.message);
      }
      commit('SET_LOADING', false);
    },
  },
};

3. **模板中使用VLoading**：
在需要展示加载信息的地方，使用`<v-loading>`或者`<i-loading>`来自组件库。

<template>
  <div>
    <button @click="tryLogin">登录</button>
    <v-loading :active="$store.getters.isLoggedIn === false && $store.state.loading" />
    <p v-if="$store.state.loginError">{{ $store.state.loginError }}</p>
  </div>
</template>

<script>
import VLoading from 'v-loading';
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['isLoggedIn', 'loadError']),
  },
  methods: {
    tryLogin() {
      this.$store.dispatch('tryLogin', { username: 'your_username' });
    },
  },
  components: {
    VLoading,
  },
};
</script>