首页 > 其他 > 详细

vue3.0请求接口的例子

时间:2020-12-16 15:25:28      阅读:615      评论:0      收藏: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>

vue3.0请求接口的例子

原文:https://www.cnblogs.com/cupid10/p/14143638.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!