url: '/flowable/definition/userList',vue2转化为vue3

在Vue 2.x中，你可能会直接在组件内部通过`this.$http`或其他 Axios 实例发起 HTTP 请求，而在 Vue 3 中，由于不再推荐使用$符号操作符，你可以选择以下几种方式来替代：

1. 使用Vuex管理状态：将axios请求封装在store中，通过actions和mutations暴露出去供组件调用。例如：

import { mapActions, mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["userList"]),
  },
  methods: {
    ...mapActions(["getUserList"]),
    async getUserList(query) {
      try {
        const result = await this.getUserList({ params: query });
        return result;
      } catch (error) {
        // 处理错误
      }
    },
  },
};

2. 使用axios库：在setup生命周期钩子中创建一个自定义的axios实例，并在组件内使用它：

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL || '/flowable/definition/userList',
});

export default {
  setup() {
    async function userList(query) {
      try {
        const response = await instance.get('', { params: query });
        return response.data;
      } catch (error) {
        console.error(error);
      }
    }

    return { userList };
  },
};

3. 使用Composition API：利用ref和async/await：

import { ref, onMounted } from 'vue';
import axios from 'axios';

const apiUrl = ref('/flowable/definition/userList');

onMounted(async () => {
  const userlist = await axios.get(apiUrl.value, { params: query });
  // ...
});

记得要在main.js或配置文件中设置axios的baseURL。