Vue.js 代码中 odds 变量无法正常使用：原因及解决方法

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { apiGetDogQd } from '@/api/dog_qd'
const url =  'server_api/getTravelData'
const urlOdds =  'server_api/getOdds/travel'

const dog_qd 	= ref([])
const odds 		= ref(0)
const status 	= ref(false)						// 用于阻止获取数据前渲染页面导致 undefine ['机场', '巴黎', '马尔代夫', '爱琴海', '冰岛', '威尼斯', '埃及']
const data 		= ref([]);
const total 	= ref({'机场':0,'巴黎':0,'马尔代夫':0,'爱琴海':0,'冰岛':0,'威尼斯':0,'埃及':0})
const totalNumber = ref([0,0,0,0,0,0,0])
const totalAll 	= ref(0);

const getData = () => {
	apiGetDogQd(url)
		.then(
			(response) => {
				//dog_total.value = response.data.total;
				dog_qd.value 	= response.data;
				console.log('获取数据成功');
				setTimeout(() => {
					getData();
				}, (10000))		// 10秒作为刷新间隔
			})
		.catch(
			(error) => {
				console.log(error);
	});
}
const getOdds = () => {
	apiGetDogQd(urlOdds)
		.then(
			(response) => {
				odds.value 	= response.data;
	console.log(odds.value);
				status.value 	= true;			// 获取到数据后才渲染
				setTimeout(() => {
					getOdds();
				}, (43200000))		// 43,200秒即12小时作为刷新间隔
			})
		.catch(
			(error) => {
				console.log(error);
	});
}

watch(dog_qd, async (newDog_qd, oldDog_qd) => {
	data.value = [];
	var dataLength = dog_qd.value.length <= 100 ? dog_qd.value.length : 100 + dog_qd.value.length % 20;
	var indexData = dog_qd.value.length - dataLength
	let dataTemp = dog_qd.value.slice(indexData)
	total.value = {'机场':0,'巴黎':0,'马尔代夫':0,'爱琴海':0,'冰岛':0,'威尼斯':0,'埃及':0}
	totalNumber.value = [0,0,0,0,0,0,0]
	totalAll.value = 0;
	for (var indexTmp = 0; indexTmp<dog_qd.value.length; indexTmp++){
		if (indexTmp >= indexData){
			if (indexTmp - indexData<20){
				// data.value[(indexTmp - indexData)%20] = [dataTemp[(indexTmp - indexData)].time.substring(11,16)+' '+dataTemp[(indexTmp - indexData)].name];
				data.value[(indexTmp - indexData)%20] = [(indexTmp+1)+' '+dataTemp[(indexTmp - indexData)].name];
			}else{
				// data.value[(indexTmp - indexData)%20].push(dataTemp[(indexTmp - indexData)].time.substring(11,16)+' '+dataTemp[(indexTmp - indexData)].name);
				data.value[(indexTmp - indexData)%20].push((indexTmp+1)+' '+dataTemp[(indexTmp - indexData)].name);
			}
		}
		totalAll.value += 1;
		switch(dog_qd.value[indexTmp].name){
			case '机场':
				total.value.机场 += 1;break;
			case '巴黎':
				total.value.巴黎 += 1;break;
			case '马尔代夫':
				total.value.马尔代夫 += 1;break;
			case '爱琴海':
				total.value.爱琴海 += 1;break;
			case '冰岛':
				total.value.冰岛 += 1;break;
			case '威尼斯':
				total.value.威尼斯 += 1;break;
			case '埃及':
				total.value.埃及 += 1;break;
		}
	}
	totalNumber.value[0] = (total.value.机场/totalAll.value*100).toFixed(1)+'%' 
	totalNumber.value[1] = (total.value.巴黎/totalAll.value*100).toFixed(1)+'%' 
	totalNumber.value[2] = (total.value.马尔代夫/totalAll.value*100).toFixed(1)+'%' 
	totalNumber.value[3] = (total.value.爱琴海/totalAll.value*100).toFixed(1)+'%' 
	totalNumber.value[4] = (total.value.冰岛/totalAll.value*100).toFixed(1)+'%' 
	totalNumber.value[5] = (total.value.威尼斯/totalAll.value*100).toFixed(1)+'%' 
	totalNumber.value[6] = (total.value.埃及/totalAll.value*100).toFixed(1)+'%' 
})


	getData();
	getOdds();

</script>
<p>根据代码中的描述和变量命名，可以猜测<code>odds</code>是用于存储某个比赛或者赛事的赔率数据。在代码中，<code>odds</code>是通过<code>getOdds</code>函数获取的，该函数会不断地向服务器请求最新的赔率数据，并将其存储到<code>odds</code>变量中。然而，在代码中并没有对<code>odds</code>变量进行任何操作，因此它可能没有被正确使用。</p>
<p>具体来说，代码中没有任何地方对<code>odds</code>变量进行读取或者使用，因此它可能没有被正确地传递给其他组件或者页面。如果希望在页面中使用<code>odds</code>变量，需要将它传递给需要使用它的组件或者页面。可以通过<code>setup</code>函数返回一个对象，将<code>odds</code>变量作为其中的一个属性，然后在需要使用它的地方进行访问。例如：</p>
<pre><code>&lt;script setup&gt;
  // ...
  return {
    odds
  }
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;{{ odds }}&lt;/div&gt;
&lt;/template&gt;
</code></pre>
<p>这样就可以在页面中访问<code>odds</code>变量了。如果希望在其他组件中使用<code>odds</code>变量，可以通过<code>provide/inject</code> API将它传递给其他组件。具体用法可以参考Vue官方文档。</p>