Question

我正在尝试了解Vue，它的依赖关系（新手）只需要帮助来了解axios的工作方式即可，对我来说很清楚。

如果我使用下面的代码，它可以返回我的数据：

methods: {
            load: function() {
                axios.get('/api/projects')
                .then(
                    response => {
                        this.projects =  (response.data.projects);
                    }     
                )
                .catch(function (error) {
                    this.errors.push(error);
                    console.log(error);
                })
            }
        }

但是如果我使用下面的代码，它不会返回数据：

methods: {
            load: function() {
                axios.get('/api/projects')
                .then(function (response) {
                    this.projects =  (response.data.projects);
                })
                .catch(function (error) {
                    this.errors.push(error);
                    console.log(error);
                })
            }
        }

区别仅在.then部分。

Answer 1

this在两个函数中都引用了不同的对象。编写console.log(this)，您将看到箭头功能之一引用了Vue实例。但是，另一个是指其他对象。可能window。对于function() {}，您无法通过this访问Vue实例。您需要预先将其存储在变量中。

var vm = this;
axios.get('/api/projects')
            .then(function (response) {
                console.log(this); // undefined or other object
                console.log(vm); // vue instance
                vm.projects =  (response.data.projects);
            })

有关其他详细信息，请参见另一个SO post。

Answer 2

来自MDN：

箭头函数没有自己的this；使用封闭执行上下文的this值。

不需要解释轴距。这就是this关键字在不同上下文中的行为方式。您的第一种方法使用了一个称为Arrow Function的东西，该函数本身不具有此功能，因此它使用当前上下文的this。但是您的第二种方法确实拥有它。

因此，为了使第二种方法起作用，您必须将this缓存在闭包之外，如下所示：

methods: {
            load: function() {
                var that = this;
                axios.get('/api/projects')
                .then(function (response) {
                    that.projects =  (response.data.projects);
                })
                .catch(function (error) {
                    this.errors.push(error);
                    console.log(error);
                })
            }
        }

然后它将起作用。

Laravel Vue axios需要解释

2 个答案: