Laravel Vue 中多於 1 個慣性數據

Question

我在 Laravel 中加載慣性頁面，但是當我應用任何過濾器時，它會保留來自第一次渲染的 GET/POST 參數，並創建新的參數集。

因此，如果我再次應用過濾器，Inertia.post 將運行兩次。 如果我第三次過濾，也會發生同樣的情況。 Inertia.post 將運行 3 次。 代碼文件太大，所以我只分享慣性部分。 希望這就足夠了嗎？ 如果需要更多詳細信息，請告訴我。

謝謝你們。

網站.php

Route::get('sales', [SalesController::class, 'showSalesGraph'])->name('showSalesGraph');

銷售控制器.php

return Inertia::render('Sales', [
            "sales" => $salesData,
            "startDate" => $startDate,
            "EndData" => $endDate
        ]);

銷售.vue

import { Inertia } from "@inertiajs/inertia";
import { computed, ref, reactive, inject, Vue } from "vue";

setup(props) {
   const postData = reactive({
        startDate: startDate,
        endDate:endDate,
        _token: usePage().props.value.csrf_token,
        change: "custom",
      });

   Inertia.get("sales", postData, {});
}

Answer 1

當您使用 Inertia 獲取數據時，您應該使用

Inertia.reload({
    only: ['properties'], 
    data: {}, 
    method: 'POST/PUT/GET/PATCH'
});

在您的控制器中，您可以有條件地加載您的 InertiaData：

public function index(Request $request): \Inertia\Response 
{    
    $validatedRequest = $request->validate([
         'date_start' => 'required|datetime',
         'date_end'   => 'required|datetime',
    ]);
    
    return Inertia::render('Pages/Some/Component', [
         ...$validatedRequest,
         'data' => fn() => $this->loadGraphData($request),
    ]);
}

private function loadGraphData(Request $request): array
{
    // do something that might be heavy..
    return [];
}

這允許您做的是僅在請求時或在第一次加載時加載圖形數據。 您可以在 Inertia 關於部分重載的文檔中閱讀更多相關信息： https ://inertiajs.com/partial-reloads

如果您想提交標准表格，我建議您使用 Inertia 的useForm助手。

例如

<script setup>
const form = useForm({name: '', date_start: null, date_end: null});
</script>
<template>
    <input v-model="form.name"/>
</template>