如何从 vue3 中的 ref 对象获取数据属性答案

【问题标题】：how can I get data property from ref object in vue3如何从 vue3 中的 ref 对象获取数据属性
【发布时间】：2021-08-22 07:28:48
【问题描述】：

首先我创建一个名为 teamData 的 ref 对象，然后获取服务 api 并分配给 teamData。

但是我应该怎么做才能从 teamData 获取数据属性。例如，我想从 teamData 获取 title 属性，但结果出乎意料

这里是代码

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

【问题讨论】：

标签： javascript vue.js vuejs3 vue-composition-api

【解决方案1】：

看起来这是一个生命周期问题，因为 setup 挂钩内的代码在 onMounted 挂钩内的代码之前运行，要解决这个问题，请尝试使用手表：

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

【讨论】：