#reactjs #vue.js
#reactjs #vue.js
Вопрос:
Я немного борюсь за достойный способ обработки передачи данных при использовании таких фреймворков, как React и Vue. Для проекта Vue, над которым я работаю, я использую этот подход и хочу убедиться, что он имеет смысл.
Прямо сейчас мой родитель выполняет «Главный» вызов API, чтобы получить весь Customer объект. Я передаю Customer в качестве реквизита дочернему компоненту. Дочерний компонент использует значение Customer.address для предварительного заполнения поля ввода. Если это поле обновляется, дочерний элемент выполняет вызов api для публикации новых данных, затем я передаю функцию обратно родительскому элементу для вызова функции «Master» и получения новой копии объекта Customer, чтобы обновились передаваемые им реквизиты. Имеет ли это смысл?
Parent.vue
<template>
<Child
:customer = "this.customer"
@handleGetCustomerData = "getCustomerData"
>
</Child>
</template>
<script>
export default {
data() {
customer = {}
}
mounted() {
this.getCustomerData()
},
methods: {
getCustomerData: function() {
axios
.get('/api/customer')
.then(response => {
this.customer = response
};
}
}
}
</script>
Дочерний.vue
<template>
<div>
<input :value="customer.address" ref="address">
<button
v-on:click="updateAddress()">
Update Address
</button>
</div>
</template>
<script>
export default {
props: {
customer: {type: Object}
},
methods: {
updateAddress() {
axios.post('/api/address', {
address: this.$refs.address.value
})
.then(response => {
this.handleGetCustomerData()
});
handleGetCustomerData() {
this.$emit('handleGetCustomerData')
}
}
}
</script>
Ответ №1:
Это имеет смысл, конечно. Мы используем реквизит для связи parent -> child и события для связи child -> parent .
Вы делаете это правильно, но у вас могут возникнуть некоторые проблемы и сложная отладка вызывающего API внутри вашего дочернего компонента. Я бы просто $emit передал какой-нибудь «updateAddress» this.$refs.address.value как параметр и вызвал API внутри родительского компонента.
Делая это, вы можете централизовать вызовы API и обновления, всегда обновляя данные дочерних элементов через props.
Надеюсь, это поможет! Вот отличная статья об этом.
Комментарии:
1. Спасибо, Матеус! Моя единственная проблема с моим подходом заключается в том, что после выполнения вызовов API для обновления данных я передаю событие родительскому, чтобы вызвать «master» api для «get» и обновить реквизиты, чтобы они передавались с обновленными значениями. Был бы «менее дорогостоящий» способ сохранения вызова API GET для получения обновленных данных — просто изменить это значение, если обновление api завершится успешно? Например, я обновляю адрес и вместо того, чтобы вызывать GET сразу после обновления, чтобы передать реквизиты дочернему элементу для отражения, я просто устанавливаю значение адреса на то, на что я его обновил? Надеюсь, я правильно это объясняю
2. Да, это решение! Как только вы узнаете, что ваш post вернул успех и какое значение вы отправили, вы можете просто обновить локальные данные дочернего элемента вручную. Но это может вызвать некоторые ненужные проблемы, поскольку у вас будет «два источника» информации (API и ваши измененные вручную локальные данные). Конечно, бывают ситуации, когда эта стоимость того стоит (в зависимости от производительности сети и т.д.), Но Обычно я не вижу проблем с выполнением другого запроса, поскольку данные были обновлены.
Ответ №2:
Я не знаю Vue, но в React я бы не позволил дочернему элементу обрабатывать запросы API вообще. Логика должна быть в одном месте (в родительском), и тогда поток будет выглядеть примерно так:
- (Родительский) Получаем объект и передаем в качестве реквизита
- (Дочерний элемент) При обновлении поля дочерний элемент выполняет обратный вызов от родительского элемента
- (Родительский) выполняет запрос api, а затем получает обновленный объект и обновляет реквизит