Vue.js两个组件共享来自服务调用的相同数据

// 创建一个服务
class DataService {
  getData() {
    // 通过后端API获取数据
    return fetch('https://example.com/api/data')
      .then(response => response.json());
  }
}

// 在组件中使用服务
Vue.component('component-a', {
  inject: ['dataService'],
  data() {
    return {
      sharedData: null
    };
  },
  mounted() {
    // 获取数据
    this.dataService.getData()
      .then(data => {
        this.sharedData = data;
      });
  },
  template: `
    <div>
      <h2>Component A</h2>
      <p>{{ sharedData }}</p>
    </div>
  `
});

Vue.component('component-b', {
  inject: ['dataService'],
  data() {
    return {
      sharedData: null
    };
  },
  mounted() {
    // 获取数据
    this.dataService.getData()
      .then(data => {
        this.sharedData = data;
      });
  },
  template: `
    <div>
      <h2>Component B</h2>
      <p>{{ sharedData }}</p>
    </div>
  `
});

// 创建Vue实例并注入服务
new Vue({
  provide: {
    dataService: new DataService()
  },
  template: `
    <div>
      <component-a></component-a>
      <component-b></component-b>
    </div>
  `
}).$mount('#app');