Vue.js-将整个对象存储在数据中

Question

我想在vue.js应用中使用游戏手柄。因此，我从Mozilla Docs中获取了一些代码并对其进行了修改：

data() {
  return {
    gamepads: {},
  };
},
created() {
  this.addEventListeners();
},

methods: {
  addEventListeners() {
    window.addEventListener('gamepadconnected', (e) => {
      this.gamepadHandler(e, true);
    });

    window.addEventListener('gamepaddisconnected', (e) => {
      this.gamepadHandler(e, false);
    });
  },

  gamepadHandler(event, connecting) {
    if (connecting) {
      console.log(
        'Gamepad connected at index %d: %s. %d buttons, %d axes.',
        event.gamepad.index,
        event.gamepad.id,
        event.gamepad.buttons.length,
        event.gamepad.axes.length,
      );

      this.gamepads[gamepad.index] = event.gamepad;
    } else {
      console.log(
        'Gamepad disconnected from index %d: %s',
        event.gamepad.index,
        event.gamepad.id,
      );

      delete this.gamepads[event.gamepad.index];
    }
  }
}

运行此命令时，一切似乎正常，console.log记录了整个Gamepad对象。但是，当我将此Gamepad对象存储在数据中时，它存储为字符串“ [object Gamepad]”。

如何存储真实对象而不是仅存储类名？