Javascript 从vuex存储检索常规类实例时，此值将变为null

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

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

 select() {
  this.selected = true;
 }

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

我实例化它，然后将它保存在vuex store中的

元素数组中

，然后检索它并将其输出到vue模板中：

但是，在鼠标按下事件中，如果我在方法中执行类似操作：

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

而且，unselect方法根本不会触发

---

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

您直接将函数引用作为事件侦听器传递，因此不会像预期的那样在

元素

实例上调用它

您应该直接在属性中编写函数调用，如下所示：

@mousedown=“element.select（）”
@mouseup=“element.unselect（）”

这样您就可以确定

元素

实例将是

此

---

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

v-on

值

@event=“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（）”

所示

生成的呈现函数包装在语句中，因此只需要

handler

，而不需要

this.handler

最后，请阅读本书的目的和工作原理。关于堆栈溢出的这些主题已经有过多的信息了