如何在 vue3 中从 ref object 获取数据属性

Question

首先，我创建了一个名为 teamData 的引用 object，然后获取服务 api 并分配给 teamData。

但是我应该怎么做才能从 teamData 获取数据属性。例如，我想从 teamData 获得标题属性，但结果是意外的

这是代码

// 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,
    }
  },
})

here is the browser output image

Answer 1

看起来这是一个生命周期问题，因为 setup hook 中的代码在 onMounted hook 中的代码之前运行，解决这个尝试使用 watch :

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

如何在 vue3 中从 ref object 获取数据属性

how can I get data property from ref object in vue3

javascript

vue.js

vuejs3

vue-composition-api

如何在 vue3 中从 ref object 获取数据 属性

how can I get data property from ref object in vue3

javascript

vue.js

vuejs3

vue-composition-api

如何在 vue3 中从 ref object 获取数据属性