vue3.0请求接口的例子

<script>
// getInTheaters 为封装的接口请求
import { getInTheaters } from "@/api/movie";
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  provide,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
export default {
  components: {},
  setup() {
    const state = reactive({
      inTheaters: [],
    });

    // 编程式导航
    const router = useRouter();
    const store = useStore();

    onBeforeMount(() => {
      store.commit("setShowBack", false);
    });

    onBeforeUnmount(() => {
      store.commit("setShowBack", true);
    });

    const getInTheatersData = async () => {
      const res = await getInTheaters(
        "/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=3535827"
      );
      state.inTheaters = res.data.data.films;

      onMounted(() => {
        //执行请求
        getInTheatersData();
      });

       //页面跳转
      const goToList = (type) => {
        router.push(`/list/${type}`);
      };

      // 传递数据给子组件
      provide("title", "电影");

      return { ...toRefs(state), goToList };
    };
  },
};
</script>