使用 VueJS 处理后端配置对象

Posted 2023-02-22

【中文标题】使用 VueJS 处理后端配置对象

【英文标题】：Working with backend configuration objects with VueJS

【发布时间】：2020-07-09 08:00:11

【问题描述】：

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

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

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

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

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

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

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

【参考方案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）。然而，这样做的好处是您可以更轻松地重新加载这些数据。

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