<script lang="ts" setup> import { onMounted, ref } from 'vue' import { TaskList } from '../TaskList/index.ts' import type { TaskType } from './index.d' import { noviceTask } from '@/api/task/index' import { useTaskListStore } from '@/store/moules/taskListStore' const taskListStore = useTaskListStore() const totalScore = ref(0) const list = ref<TaskType[]>([]) const finishedTaskCount = ref(0) function getTaskList() { noviceTask().then((res) => { list.value = res.taskCenterList totalScore.value = res.totalScore finishedTaskCount.value = res.finishedTaskCount taskListStore.changeNoviceTask(res.existFinishedTask) }) } onMounted(() => { getTaskList() }) </script> <template> <TaskList title="新手任务" :list="list" :total-score="totalScore" :finished-task-count="finishedTaskCount" @update-list="getTaskList()" /> </template> <style lang="scss" scoped> .nvoice-task-box { width: 95%; .title { font-size: 14px; font-weight: bold; color: #000000; line-height: 22px; letter-spacing: 1px; margin: 16px 0; } } </style>