【vue3.0 组件模板】调用接口 设置state

<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>