Работа с объектами конфигурации бэкэнда с VueJS

Question

Исходя из мира чистых PHP как для внутреннего, так и для внешнего интерфейса, я сейчас использую приложение VueJS, использующее API PHP.

Допустим, я хотел бы сделать страница с формой. В этой форме у меня есть поле выбора «Пол» с опциями «Мужской» и «Женский».

В PHP, у меня будет файл конфигурации с чем-то вроде этого:

$config['GENDER'] = [
    "M" => [
       "label" => "Male",
    ],
    "F" => [
       "label" => "Female",
    ],
];

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

В PHP это нормально, поскольку бэкэнд и веб-интерфейс требуют только этот файл.

Работая с VueJS, как вы решаете эту проблему? Вы делаете AJAX вызов бэкэнда для получения этих данных при загрузке приложения? Дублируете ли вы общую конфигурацию как во внешнем, так и во внутреннем интерфейсе?

Answer 1

Хорошо, любое из ваших предложений сработает.

Вы можете просто предоставить данные в вашем php / html сценарии, например, так:

(возможно, экранировать кавычки):

<my-vue-component :genders="<?php echo json_encode(...); ?>"></my-vue-component>

<script>
    // MyVueComponent.vue
    export default {
        props: {
            genders: Array
        }
    }
</script>

Или запросите данные в хуке mounted() в вашем Vue компоненте, например так:

<script>
    export default {
        mounted() {
            this.$http.get('/api/genders').then((response) {
                this.genders = response.data;
            });
        },
        data() {
            return {
                genders: []
            }
        }
    ...
    }
</script>

Последний вариант сложнее реализовать, так как вам нужно создать конечную точку JSON (API). Однако преимущество этого состоит в том, что вы можете легче перезагрузить эти данные.

Таким образом, если ожидается, что ваши данные будут быстро меняться ( dynamici c data ), то это путь к go. Если это stati c data , то вы должны предоставить его через свойства компонента. Данные будут обновляться только при перезагрузке страницы.