重新表達的標題為：: Execution of mounted hook encountered an unhandled error

Question

我正在建立一個待辦事項網頁應用程式。我已成功取得所有待辦事項清單項目並將其顯示在我的主頁上。 當我嘗試只獲取一篇文章並顯示它時，問題就出現了，它返回 hook is not a function 錯誤。

我在伺服器端使用 laravel，在客戶端使用 vite。

下面是我的 api.php 路由

<?php

use AppHttpControllersTodoController;
use AppHttpControllersTodosController;
use IlluminateHttpRequest;
use IlluminateSupportFacadesRoute;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});


Route::get('/todos', TodosController::class);
Route::get('/todos/{todo:uuid}', TodoController::class);

在第三條路線中，我使用 uuid 來獲取單一帖子並顯示它。在伺服器端正確顯示

下面分別是我的 TodoController.php 和 TodoResource。

<?php

namespace AppHttpControllers;

use AppHttpResourcesTodoResource;
use AppModelsTodo;
use IlluminateHttpRequest;

class TodoController extends Controller
{
    //
    public function __invoke(Todo $todo)
    {
        return new TodoResource($todo);
    }
}

TodoResource.php

<?php

namespace AppHttpResources;

use IlluminateHttpResourcesJsonJsonResource;

class TodoResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array|IlluminateContractsSupportArrayable|JsonSerializable
     */
    public function toArray($request)
    {
        return [
            'uuid' => $this->uuid,
            'name' => $this->name,
            'completed' => $this->completed,
            'completed_at' => $this->completed_at,
        ];
    }
}

我已經使用 axios 在客戶端伺服器端獲取了該帖子。以下是 useTodos.js 的程式碼

import { ref } from 'vue'

import axios from 'axios'


export default function useTodos() {
    const todos = ref([])
    const todo = ref([])


    const fetchTodos = async () => {
        let response = await axios.get('/api/todos')
        todos.value = response.data.data
    }


    const fetchTodo = async (uuid) => {
        let response = await axios.get(`/api/todos/${uuid}`)
        console.log(response)
        todo.value = response.data.data
    }


    return {
        todos,
        fetchTodos,
        todo,
        fetchTodo
    }
}

下面是在客戶端-伺服器端顯示單一貼文的頁面

<template>
    <div>
        {{ todo }}
    </div>
</template>

<script>

import useTodos from '../api/useTodos'
import { onMounted } from 'vue'

export default {
    props: {
        uuid: {
            required: true,
            type: String
        }
    },
    setup(props) {
        
        const { todo, fetchTodo } = useTodos()

        onMounted(fetchTodo(props.uuid))

        return {
            todo
        }
    },
}
</script>

我的路由器頁面

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../pages/Home.vue'
import Todo from '../pages/Todo.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/todos/:uuid',
        name: 'todo',
        component: Todo,
        props: true
    }
]

export default createRouter({
    history: createWebHistory(),
    routes
})

我試圖找到解決方案，解釋為什麼當我嘗試獲取單個帖子時，它帶來的鉤子不是一個函數。 有人可以幫我解決這個問題嗎？

Answer 1

嘗試以這種方式運行

async onMounted(() => {
  await fetchTodo(props.uuid)
})

如下： https://vuejs.org/api/composition -api-lifecycle.html#onmounted

#