我正在创建一个待办事项网络应用程序。我已成功获取所有待办事项列表项并将其显示在我的主页上。 当我尝试仅获取一篇文章并显示它时,问题就出现了,它返回 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 })
我试图找到解决方案,解释为什么当我尝试获取单个帖子时,它带来的钩子不是一个函数。 有人可以帮我解决这个问题吗?
尝试以这种方式运行
如下所示: https://vuejs.org/api/composition -api-lifecycle.html#onmounted