VueJS：如何在mounted钩子中访问Vuex Store数据？

嘿，我一眼就瞅出问题所在啦！你遇到的这个报错，核心原因是**socket.on回调函数里的this指向不对**——你用普通function()定义回调时，函数内部的this已经不再指向Vue组件实例了，自然找不到$store；而testEvent里直接用this没问题，是因为它本身就在Vue方法的上下文里，this还是组件实例。

下面给你三种常用的解决办法，选顺手的用就行：

方法1：使用箭头函数（推荐，简洁直观） #

箭头函数不会绑定自己的this，会继承外层上下文的this（也就是你的Vue组件实例），直接改回调写法就行：

methods: {
  testEvent() { 
    let players = this.$store.state.players;
    console.log(players);
  },
  socketEvent() { 
    socket.on('dice_data', (data) => { // 改成箭头函数
      let players = this.$store.state.players;
      console.log(players);
    });
  }
},
mounted() { 
  this.socketEvent() 
}

方法2：提前保存组件实例的this #

在回调外面先把组件实例的this存成变量，比如vm或者that，然后在回调里用这个变量代替this：

methods: {
  testEvent() { 
    let players = this.$store.state.players;
    console.log(players);
  },
  socketEvent() { 
    const vm = this; // 先把组件实例的this存起来
    socket.on('dice_data', function(data) {
      let players = vm.$store.state.players; // 用vm代替this
      console.log(players);
    });
  }
},
mounted() { 
  this.socketEvent() 
}

方法3：用bind绑定this #

给回调函数手动绑定组件实例的this，确保回调内部的this指向正确：

methods: {
  testEvent() { 
    let players = this.$store.state.players;
    console.log(players);
  },
  socketEvent() { 
    socket.on('dice_data', function(data) {
      let players = this.$store.state.players;
      console.log(players);
    }.bind(this)); // 绑定组件实例的this
  }
},
mounted() { 
  this.socketEvent() 
}

这三种方法里，箭头函数是现在Vue项目里最常用的写法，简洁又不容易出错，优先推荐第一种哦～

内容的提问来源于stack exchange，提问作者bonblow