javascript - 从 vuex 存储中检索常规类实例时，这变为 null

Question

我有一个简单的 ES6 类实例:

class Element {
 constructor() {
  this.selected = false;
 }

 select() {
  this.selected = true;
 }

 unselect() {
  this.selected = false;
 }
}

我实例化它，然后将它保存在 vuex 存储中的 elements 数组中，然后检索它并将其输出到 vue 模板中:

然而，在鼠标按下事件中，如果我在我的方法中做这样的事情:

select() {
console.log(this); // null
  this.selected = true;
 }

并且，unselect 方法根本不会触发。

我如何保留/恢复对此的访问权限？

Answer 1

您将函数引用直接作为事件监听器传递，因此它不会按预期在 element 实例上调用。

您应该像这样直接在属性中编写函数调用:

@mousedown="element.select()"
@mouseup="element.unselect()"

这样您就可以确定 element 实例将是 this。

---

让我澄清一些值得一提的事情，以防不清楚，因为这里发生了一些无法解释的魔法。如果表达式的计算结果为函数调用或其他不是简单属性访问器的表达式，Vue 会将 v-on 值包装在函数中。

@event="handler"         = handler
@event="handler('foo')"  = $event => handler('foo')
@event="handler($event)" = $event => handler($event)
@event="foo.bar"         = foo.bar
@event="foo.bar('bar')"  = $event => foo.bar('bar')
@event="count++"         = $event => count++

现在您可以明白为什么需要像 @mousedown="event.select()" 那样调用该函数了。

生成的渲染函数被包装在 with 中声明，这样只有 handler 是必需的，而不是 this.handler。

最后，阅读 bind 的目的以及如何this作品。 Stack Overflow 上已经有大量关于这些主题的信息。