使用 VueJS 处理后端配置对象答案

【问题标题】：Working with backend configuration objects with VueJS使用 VueJS 处理后端配置对象
【发布时间】：2020-07-09 08:00:11
【问题描述】：

来自后端和前端的纯 PHP 世界，我现在正在使用一个使用 PHP API 的 VueJS 应用程序。

假设我想用表单呈现一个页面。在此表单中，我有一个选择字段“性别”，其中包含“男性”和“女性”选项。

在 PHP 中，我会有一个类似这样的配置文件：

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

我将使用它在前端创建选择选项，但也会在我的后端用于某些字段验证。

在 PHP 中这很好，因为后端和前端只需要这个文件。

使用 VueJS，你如何解决这个问题？您是否对后端进行 AJAX 调用以在应用加载时检索这些数据？您是否在前端和后端复制共享配置？

【问题讨论】：

标签： php ajax vue.js architecture

【解决方案1】：

你的任何一个建议都会奏效。

您可以像这样在 php/html 脚本中简单地提供数据：

（引号可能需要转义）：

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

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

或者像这样在你的 Vue 组件中请求 mounted() 钩子中的数据：

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

最后一个更难实现，因为您需要创建一个 JSON 端点（一个 API）。然而，这样做的好处是您可以更轻松地重新加载这些数据。

因此，如果您的数据预计会快速变化（动态数据），那么这就是要走的路。如果是静态数据，那么你应该通过组件属性来提供它。数据只会在页面重新加载时更新。

【讨论】：