VueJS this in lodash 节流方法

Question

我正在尝试限制我的 VueJS 应用程序中的方法。我一开始尝试了以下方法：

export default {
    data () {
        return {
            foo: 'bar'
        }
    },
    methods: {
        doSomething () {
            console.log('olas')
        }
    },
    created () {
        _.throttle(this.doSomething,200)
    }
}

但是 doSomething 方法没有被触发：https://jsfiddle.net/z4peade0/

然后，我尝试了这个：

export default {
    data () {
        return {
            foo: 'bar'
        }
    },
    methods: {
        doSomething: _.throttle( () => {
            console.log('olas')
        },200)
    },
    created () {
        this.doSomething()
    }
}

函数g被触发：https://jsfiddle.net/z4peade0/1/

问题是，我无法访问节流方法内的foo 属性：

export default {
    data () {
        return {
            foo: 'bar'
        }
    },
    methods: {
        doSomething: _.throttle( () => {
            console.log(this.foo) // undefined
        },200)
    },
    created () {
        this.doSomething()
    }
}

我试图做类似的事情：

const self = {
    ...
    methods: {
        doSomething: _.throttle( () => {
            console.log(self.foo) 
        },200)
    },
    ...
}

export default self

没有成功

如何在 VueJS 方法上使用 lodash 节流方法，并使用 this 上下文？

Answer 1

您使用的箭头函数绑定了错误的上下文 (this)。你应该使用普通的function：

    doSomething: _.throttle( function () {
        console.log('olas', this.foo);
    },200)