Lokale Vue-Komponentendatenfreigabe Vue.observable()-Nutzung

//store.js
importiere Vue von „vue“;

exportiere let store =Vue.observable({count:0,name:'observable'});
exportiere let Mutationen={
    setCount(Anzahl){
        store.count=Anzahl;
    },
    ändereName(Name){
        Geschäft.Name=Name;
    }
}

//Beobachter.vue
<Vorlage>
  <div>
    <h1>Beobachtbare gemeinsame Nutzung von Datenzuständen über mehrere Komponenten hinweg</h1>
    <div>
      <oben></oben>
      <unten></unten>
    </div>
  </div>
</Vorlage>

<Skript>
importiere oben aus „./components/top.vue“;
importiere unten aus „./components/bottom.vue“;
Standard exportieren {
  Name: 'obserVable',
  Komponenten:
    Spitze,
    unten
  }
};
</Skript>

<Stilbereich>
</Stil>

//Komponente a
<Vorlage>
  <div Klasse="bk">
    <span
      ><h1>eine Komponente</h1>
      {{ Anzahl }}--{{ Name }}
    >
    <button @click="setCount(count + 1)">+1 in der aktuellen Komponente</button>
    <button @click="setCount(count - 1)">Aktuelle Komponente -1</button>
  </div>
</Vorlage>
<Skript>
importiere { Store, Mutationen } aus '@/store';
Standard exportieren {
  berechnet: {
    zählen() {
      gibt Store.Count zurück;
    },
    Name() {
      gib Store.Name zurück;
    }
  },
  Methoden: {
    setCount: mutationen.setCount,
    Änderungsname: mutationen.Änderungsname
  }
};
</Skript>
<Stilbereich>
.bk {
  Hintergrund: hellrosa;
}
</Stil>

//Komponente b
<Vorlage>
  <div Klasse="bk">
    <h1>b-Komponente</h1>
    {{ Anzahl }}--{{ Name }}
    <button @click="setCount(count + 1)">+1 in aktueller b-Komponente</button>
    <button @click="setCount(count - 1)">Aktuelle b-Komponente -1</button>
  </div>
</Vorlage>
<Skript>
importiere { Store, Mutationen } von '@/store';
Standard exportieren {
  berechnet: {
    zählen() {
      gibt Store.Count zurück;
    },
    Name() {
      gib Store.Name zurück;
    }
  },
  Methoden: {
    setCount: mutationen.setCount,
    Änderungsname: mutationen.Änderungsname
  }
};
</Skript>
<Stilbereich>
.bk {
  Hintergrund: hellgrün;
}
</Stil>