Primero creo un objeto ref llamado teamData, luego busco la API del servicio y lo asigno a teamData.
Pero, ¿qué debo hacer para obtener la propiedad de datos de teamData? por ejemplo, quiero obtener la propiedad del título de teamData, pero el resultado es inesperado
aquí está el código
// useTeamData.js import { fetchTeamGoal } from '@/api/team' import { onMounted, watch, ref} from 'vue' export default function getTeamData(date) { const teamData = ref({}) const getTeamGoals = async () => { await fetchTeamGoal(date.value + '-01').then(res => { teamData.value = res.data }) } onMounted(getTeamGoals) watch(date, getTeamGoals) return { teamData, getTeamGoals } } // test.vue import dayjs from 'dayjs' import useTeamData from '@/components/composables/useTeamData' import {defineComponent, ref, toRefs, computed, provide, toRaw, reactive} from 'vue' import { useStore } from 'vuex' export default defineComponent({ name: 'Test', setup: () => { const store = useStore() const userInfo = computed(() => store.state.user.userInfo) const date = ref(dayjs().format('YYYY-MM')) const { teamData } = useTeamData(date) console.log(teamData, 'teamData') console.log(teamData.title) console.log(teamData.value.title) provide('role', userInfo.value.role) return { date, userInfo, teamData, } }, })Parece que es un problema del ciclo de vida, porque el código dentro del gancho de configuración se ejecuta antes que el código dentro del gancho onMounted , para resolver esto, intente usar un reloj:
import {defineComponent,watch, ref, toRefs, computed, provide, toRaw, reactive} from 'vue' ... const { teamData } = useTeamData(date) watch(()=>teamData,(newVal,oldVal)=>{ console.log(newVal.value.title) }, { deep:true, immediate:true })