如何使用 with Composition API 语法获得有效的惯性形式？

Question

在使用 Inertiajs 3 的 laravel 9 中，我使用 $inertia.form 来保存数据，例如：

<template>
    <div v-if="!formEditor.processing">
        <input type="text" class="form-control" v-model="formEditor.name"
        :class="{ 'is-invalid' : formEditor.errors && formEditor.errors.name }"
    >
        <div class="invalid-feedback mb-3" v-if="formEditor.errors"
        :class="{ 'd-block' : formEditor.errors && formEditor.errors.name}">
        {{ formEditor.errors.name }}
    </div>
</div>
...

</template>



<script>
    import AdminLayout from '@/Layouts/AdminLayout'

    export default {
    props: ['currency', 'is_insert'], // I got these data from controller

    components: {
    AdminLayout,
},
    data() {
        return {
            formEditor: this.$inertia.form({
                id: '',
                name: '',
            }),
        }
    },
    methods: {
        saveCurrency() {
            this.formEditor.post(this.route('admin.currencies.store'), {
                onError: (e) => {
                    console.log(e)
                }
            })
        }, // saveCurrency() {
    }
}
</script>

其中 formEditor 是有效的惯性形式，它对我来说工作正常，但我未能使用 Composition API 重新制作此代码，例如：

<script>
import AdminLayout from '@/Layouts/AdminLayout'

import {settingsJsMomentDatetimeFormat, settingsAppColors} from '@/app.settings.js'
import {ref} from "vue";


let self= this
console.log('self::')
console.log(self)      // I have undefined here

export default {
    props: ['currency'],

    name: 'CurrencyForm',
    components: {
        AdminLayout
    },
    setup(props) {
        let currency = ref(props.currency)
        console.log('CurrencyForm $inertia::')
        console.log($inertia) // I got "ReferenceError: $inertia is not defined error" here

        console.log('CurrencyForm this.$inertia::')
        console.log(this.$inertia) // THIS WAY DOES NOT WORK here

        console.log('CurrencyForm self.$inertia::')
        console.log(self.$inertia)  // THIS WAY DOES NOT WORK here

        let form = this.$inertia.form({
            id: '',
            name: '',
        })
        const formEditor = ref( form )

        const adminCurrencyFormOnMounted = async () => {
           ...
        }
        onMounted(adminCurrencyFormOnMounted)

        return { // setup return
           ...
        }
    }, // setup() {

}

我没有创建惯性形式，因为我想我失去了有效的惯性上下文。我怎样才能得到它并修复这个错误？

谢谢！

Answer 1

我使用了 https://inertiajs.com/manual-visits#method 中的方法：

import { Inertia } from '@inertiajs/inertia'
Inertia.visit(route('admin.users.index'), {method: 'get'});

来自https://inertiajs.com/shared-data#accessing-shared-data :

import { usePage } from '@inertiajs/inertia-vue3'
usePage.props.jetstream.flash

如何使用 with Composition API 语法获得有效的惯性形式？

How to gert valid inertia form with with Composition API syntax?

inertiajs

laravel

vuejs3