vue3.0請求接口的例子

<script>
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;
      console.log(res.data.data.films);

      onMounted(() => {
        getInTheatersData();
      });

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

      // 傳遞數據給子組件
      provide("title", "黑馬電影");

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