Правильный способ передачи и хранения данных из Laravel в Vue

Question

Я не привык к компонентам Vue.Вторая проблема заключается в том, что я хотел правильно передать данные из лезвия laravel в компонент vuejs.Потому что я сохранил его в подпорках, а затем передал реквизиты в свойство data, например:

// ticket blade

<ticket-create :menu-categories-prop="{{ json_encode($menuCategories) }}"></ticket-create>

// ticket component

export default {
    props: ['menuCategoriesProp'],
    created(){
        this.menuCategories = this.menuCategoriesProp;
    },
    data() {
        return {
            menuCategories: [],
        }
    }
}

теперь у меня есть данные menuCategoriesProp и menuCategories, которые немного избыточны.Я делаю это неправильно?

Answer 1

Ваш код в порядке.Вы можете получить категории через AJAX.В вашем случае не рекомендуется использовать ajax.

Answer 2

Это не проблема избыточности, это логическая проблема.Вы не должны передавать ЛЮБУЮ переменную от лезвия для просмотра на мой взгляд.Вы должны сделать что-то вроде этого:

1. Ваш контроллер (возможно, из метода index) проверяет, хочет ли запрос ответ JSON, если нет, возвращает представление, иначе коллекция как ответ JSON (продолжайтечтобы понять, почему).
2. Когда загружается представление, VueJs загружает компонент и (вот как я это делаю) в методе mounted вы делаете Ajax-вызов (возможно, с axios) вашему контроллеру, которыйвернет коллекцию

Таким образом, у вас есть управление асинхронными запросами, которое позволит вам обновлять данные и избегать перезагрузки страницы каждый раз.

Как я писалраньше я бы максимально избегал передачи свойств от блейда к vue, если только они не являются контекстными переменными, такими как пользовательские настройки или системные настройки.