So verstehen Sie den einfachen Speichermodus der Statusverwaltung von Vue

//store.js
exportiere const store = {
    Zustand: {
        alle Aufgaben:
            {text: 'Chinesisch-Hausaufgaben schreiben', erledigt: false},
            {text: 'Mathetest machen', erledigt: false}
        ]
    },
    addTodo(str){
        const obj = {text: str, fertig: false}
        dieser.Status.todos.push(Objekt)
    },
    setFertig(index){
        dieser.Zustand.todos[index].done = true
    }
}

//A.vue
<Vorlage>
    <div Klasse="A">
        Ich bin Komponente A<ul>
           <li v-for="(Aufgaben,Index) in Aufgaben" 
           :Schlüssel="index" :Klasse="todo.done?'done':''" @click="setDone(index)">
           {{todo.text}}
           </li>
       </ul>
    </div>
</Vorlage>

<Skript>
importiere {store} aus '../store/store.js'
Standard exportieren {
    Name: "A",
    Daten(){
        store.state zurückgeben
    },
    Methoden: {
        setFertig(index){
            store.setDone(index)
        }
    }
}
</Skript>

<Stilbereich>
.A{
    Hintergrund: rot;
    Farbe: weiß;
    Polsterung: 20px;
}
.A li.done{
    Hintergrund: grün;
}
</Stil>

//B.vue
<Vorlage>
    <div Klasse="B">
        <div>
            Ich bin Komponente B, trage die Aufgabe in das Eingabefeld unten ein und füge die Aufgabe in Komponente A hinzu</div>
        <Eingabetyp="Text" v-Modell="Text">
        <button @click="addTodo">Aufgabe hinzufügen</button>
    </div>
</Vorlage>

<Skript>
importiere {store} aus '../store/store.js'
Standard exportieren {
    Name: 'B',
    Daten(){
        zurückkehren {
            text: ''
        }
    },
    Methoden:{
        addTodo(){
            wenn(dieser.text){
                store.addTodo(dieser.text)
            }
        }
    }
}
</Skript>

<Stilbereich>
.B{
    Hintergrund: gelb;
    Polsterung: 20px;
}
</Stil>

//App.vue
<Vorlage>
  <div id="app">
    <A />
    <B />
  </div>
</Vorlage>

<Skript>

importiere A aus './components/A.vue'
importiere B aus './components/B.vue'

Standard exportieren {
  Name: "App",
  Komponenten:
    A,
    B
  }
}
</Skript>