vue.js - 当数据源是 VueX 商店时，如何在 VUE.js 3 子组件中设置表单数据？

Question

我有一个表单组件，我想使用空白来创建新记录并在编辑时填写。创建和编辑在两个不同的视图中。

我的表单组件称为 CustomerForm

<template>
    <form v-on:submit.prevent="submitCustomerForm" class="">
        <div class="form-group">
            <label>First Name</label>
            <input type="text" class="form-control" name="customer_fname" v-model="customerFormData.customer_fname" required/>
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <input type="text" class="form-control" name="customer_lname" v-model="customerFormData.customer_lname" required/>
        </div>
    </form>
</template>

<script>
    export default {
        name: "CustomerForm",
        data: function () {
            return {
                customerFormData: {}
            }
        },
        props: {
            editing: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        emits: ['submitCustomerForm'],
        methods: {
            submitCustomerForm: function(){
                //Call the parent and submit the form data

                this.$emit('submitCustomerForm', this.customerFormData);
            },
            clearFormData(){
                //clear the form & refocus for next entry

                let self = this;
                Object.keys(this.customerFormData).forEach(function(key,index) {
                    self.customerFormData[key] = '';
                });
            }
        },
        mounted () {
            if(this.editing){
                // If the parent says we are editing get the workingCustomerData from
                // the vuex store
                // This gets called but the form does not populate
                // I know the data is there because in the parent view i can see it
                this.customerFormData = this.$store.getters['customer/workingCustomerData'];
            }
        }
    }
</script>

我的父组件

<template>
<div class="container-fluid app-view-container">
    <div class="row">
        <div class="col-12 app-view-title">
            <h6>{{ workingCustomerData.customer_company_name ? workingCustomerData.customer_company_name +' - ': ''}} {{ workingCustomerData.customer_fname }} {{ workingCustomerData.customer_lname }}</h6>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <CustomerForm @submitCustomerForm="submitCustomerForm" ref="customerForm" :editing="true"/>
                </div>
            </div>
        </div>
        <div class="col-md-6">

        </div>
    </div>
</div>
</template>

<script>
import CustomerForm from '@/components/Customers/CustomerForm';

export default {
    name: "CustomerDetailView",
    components: {
        CustomerForm
    },
    data: function(){
        return {

        }
    },
    methods: {

    },
    computed: {
        workingCustomerData: function() {
            return this.$store.getters['customer/workingCustomerData'];
        },
    },
    mounted(){
        /** Populate the Company Data**/
        this.$store.dispatch('customer/getCustomerByID', this.$route.params.ID).then(() => {
        }, (reject) => {
            console.log(reject);
        });
    }
}

我觉得我在这里的实际设计中做错了什么。如果组件正在以编辑能力使用，我应该如何从 vuex 存储中填充表单字段？

标签： vue.jsvuexvuejs3