Der erneut ausgedrückte Titel lautet: Bei der Ausführung des gemounteten Hooks ist ein nicht behandelter Fehler aufgetreten

Question

Ich erstelle eine To-Do-Webanwendung. Ich habe alle Aufgabenlisteneinträge erfolgreich abgerufen und auf meiner Homepage angezeigt. Das Problem tritt auf, wenn ich versuche, nur einen Artikel abzurufen und anzuzeigen. Der Fehler „Hook is not a function“ wird zurückgegeben.

Ich verwende Laravel auf der Serverseite und Vite auf der Clientseite.

Das Folgende ist meine api.php-Route

<?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);

Auf dem dritten Weg verwende ich uuid, um einen einzelnen Beitrag abzurufen und ihn anzuzeigen. Wird serverseitig korrekt angezeigt

Das Folgende sind meine TodoController.php bzw. 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,
        ];
    }
}

Ich habe den Beitrag auf der Client-Server-Seite mit Axios abgerufen. Das Folgende ist der Code von 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
    }
}

Die folgende Seite zeigt einen einzelnen Beitrag auf der Client-Server-Seite an

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

Meine Router-Seite

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

Ich versuche eine Lösung dafür zu finden, warum der Hook, den er mit sich bringt, keine Funktion ist, wenn ich versuche, einen einzelnen Beitrag zu erhalten. Kann mir jemand helfen, dieses Problem zu lösen?

Answer 1

尝试以这种方式运行

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

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