Javascript 如何将组件对象移动到全局对象？

我目前正在开发一个音乐播放器，我有一个“tracks”组件，用于检索显示歌曲列表的ajax请求。单击后，我将歌曲数据放入一个对象中，我正试图将该对象发送到一个完全无关的组件，即音频播放器。将此数据发送到音频播放器的最佳方式是什么

跟踪

顶轨
白天
周
月
年
生活


{{track.name}

{{track.artistName}

从“axios”导入axios；
导出默认值{
名称：'轨道'，
组成部分：{
},
数据（）{
返回{
轨道：[]，
轨道：{
姓名：“，
艺术家：“，
专辑：“，
歌曲：“
},
范围：'天'
}
},
创建（）{
这是trackData（）；
},
观察：{
范围：函数（）{
这是trackData（）；
}
},
方法：{
trackData:函数（）{
axios.get（）http://api.napster.com/v2.2/tracks/top?apikey=YTkxZTRhNzAtODdlNy00ZjMzLTg0MWItOTc0NmZmNjU4Yzk4&limit=10&range=“+这个范围）
。然后（响应=>{
//JSON响应会自动解析。
this.tracks=response.data.tracks
})
.catch（e=>{
此.errors.push（e）
})
},
currentTrack：功能（跟踪）{
this.track.name=track.name；
this.track.artist=track.artistName；
this.track.album=track.albumId；
this.track.song=track.href；
}
}
}

音频播放器

从“/CurrentTrack”导入CurrentTrack；
从“/PlayerControls”导入PlayerControls；
从“/PlayerPlayback”导入PlayerPlayback；
导出默认值{
名称：“音频播放器”，
组成部分：{
CurrentTrack，
玩家控制，
播放回放
},
数据（）{
返回{
}
}
}

随着应用程序变得越来越大、越来越复杂，这将是一个很好的使用方法，但它也引入了一些概念，如突变和动作，这可能需要一些时间来让您重新思考。实现所需功能的更简单方法是设置根组件的数据。只需设置根Vue组件的数据属性，并使用

this.$root.$data

检索它。代码如下所示：

new Vue({
  ...
  data: {
    user: ...
  }
})

您需要一个vuex：

<template>
  <div id="audio-player">
    <div class="player__inner">

      <current-track class="player__left"/>

      <div class="player__center">
        <player-controls/>
        <player-playback/>
      </div>

      <div class="player__right">
        <!-- <device-picker/> -->
        <!-- <volume-bar/> -->
      </div>
    </div>
  </div>
</template>

<script>
  import CurrentTrack from './CurrentTrack';
  import PlayerControls from './PlayerControls';
  import PlayerPlayback from './PlayerPlayback';

  export default {
      name: "audio-player",
      components: {
        CurrentTrack,
        PlayerControls,
        PlayerPlayback
      },
      data () {
        return {

        }
      }
  }
</script>

new Vue({
  ...
  data: {
    user: ...
  }
})