Question

我想重复使用相同的Vue组件来编辑和创建新用户。

在与vue-router一起工作时，我添加了beforeRouteEnter，它可以通过API提取数据。根据URL中是否设置了ID，我是否要获取现有用户（edit）。

这是我的方法：

beforeRouteEnter (to, _from, next) {
        if (to.params.id) {
            axios
            .all ([
                axios.get ('/api/user/' + to.params.id),
                axios.get ('/api/states/users')
            ]).then (axios.spread ((userRes, statesRes) => {
                    next ((vm) => {
                        vm.user = userRes.data.data;
                        vm.states = statesRes.data.data;
                        vm.create = false;
                    });
                })
            );
        }
        else {
            axios
            .all ([
                axios.get ('/api/states/users')
            ]).then (axios.spread ((statesRes) => {
                    next ((vm) => {
                        vm.states = statesRes.data.data;
                    });
                })
            );
        }
    },

但是您可以看到：这不是一个很好的处理方法。我正在考虑将URL添加到数组中，如果'/api/user/' + to.params.id)不为空，则将to.params.id推入该数组。

但是我不确定这是否是最好的方法，因为我需要以某种方式处理axios.spread部分（也许使用数组键，...）。

所以我的问题是：如何优化代码的性能和可读性更好的代码？

Answer 1

您可以在使用Alpha之前简单地构建promise数组。由于您使用的是ES6语法，因此您也可以省略Epsilon来简化数组的构造。

这里是这样的：

Quattro

动态使用axios.all

1 个答案: