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

Question

我目前正在音乐播放器上工作，我有一个“曲目”组件，可检索显示歌曲列表的ajax请求。 onClick我使歌曲数据进入一个对象，该对象正试图发送到一个与音频播放器完全无关的组件。将这些数据发送到音频播放器的最佳方法是什么？

跟踪

<template>
<div id="tracks">
  <h5 class="header">Top tracks</h5>

  <select name="range" v-model="range">
    <option value="day">Day</option>
    <option value="week">Week</option>
    <option value="month">Month</option>
    <option value="year">Year</option>
    <option value="life">Life</option>
  </select>
  <br>
  <div id="top-tracks">
  <div id="track"  v-for="(track) in tracks" :key='track.id'>
    <img @click="currentTrack(track)" class="cover" :src="'https://api.napster.com/imageserver/v2/albums/' + track.albumId  + '/images/500x500.jpg'">

    <div class=content-name><p>{{track.name}}</p></div>
    <div class="artist-name"><p>{{track.artistName}}</p></div>
  </div>
  </div>

</div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Tracks',
  components: {
  },
  data () {
    return {
      tracks: [],
      track: {
        name: "",
        artist: "",
        album: "",
        song: ""
      },
      range: 'day'
    }
  },
  created() {
    this.trackData();
  },
  watch: {
    range : function () {
      this.trackData();
    }
  },
  methods: {
    trackData: function () {
      axios.get('http://api.napster.com/v2.2/tracks/top?apikey=YTkxZTRhNzAtODdlNy00ZjMzLTg0MWItOTc0NmZmNjU4Yzk4&limit=10&range=' + this.range)
      .then(response => {
        // JSON responses are automatically parsed.
        this.tracks = response.data.tracks
      })
      .catch(e => {
        this.errors.push(e)
      })
    },
    currentTrack: function (track) {
      this.track.name = track.name;
      this.track.artist = track.artistName;
      this.track.album = track.albumId;
      this.track.song = track.href;

    }
  }
}
</script>

音频播放器

<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>

Answer 1

随着您的应用程序变得越来越大，越来越复杂，Vuex将会非常有用，但是它也会引入诸如变异和动作之类的概念，可能需要一些时间来解决。实现所需目标的更简单方法是设置根组件的数据。只需设置您的Vue根组件的data属性，然后使用this.$root.$data进行检索。该代码将是这样的：

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