在 data() 中声明的变量在监听器中未定义

【问题标题】：Variable declared in data() is Undefined in Listener在 data() 中声明的变量在监听器中未定义
【发布时间】：2020-06-25 17:58:54
【问题描述】：

我在组件的 data() 部分中声明了一个“userid”变量。在mounted() 方法中，我为MetaMask 启动了一个监听器。在 MetaMask 中更改帐户后，将触发此侦听器。但是，监听器中的“userid”（在 data() 中声明）是未定义的。

 export default {
  name: 'App',
  data () {
   return {
    userid: null
   }
 },
 mounted () {
 ...
 // MetaMask Listener
 window.ethereum.on('accountsChanged', function (accounts) {
  this.userid = accounts
 })
}

我该如何解决这个问题？

【问题讨论】：

把数据变成箭头函数，这样你就可以在正确的上下文中使用“this”了。
谢谢马丁。但是，我在挂载方法的其他地方使用当前数据函数使用了相同的变量（this.userid）。我只是在监听器中遇到了这个问题，这显然是在之前加载后触发的。

标签： javascript node.js vue.js ethereum metamask

【解决方案1】：

Vue 在strict 模式下运行。这意味着this 绑定到常规函数本身。

你有 3 种方法来解决这个问题：

使用箭头功能：

 window.ethereum.on('accountsChanged', accounts => {
  this.userid = accounts
 })

使用.bind()

 window.ethereum.on('accountsChanged', function (accounts) {
  this.userid = accounts
 }.bind(this))

在外面声明一个变量并将this赋值给它：

 var self = this;
 window.ethereum.on('accountsChanged', function (accounts) {
  self.userid = accounts
 })

【讨论】：

非常非常感谢 Ifaruki。这确实解决了我的问题。
@JF0001 没问题