So überschreiben Sie Vuex Store-Daten

Question

Ich habe eine wiederverwendbare vue.js Kontaktformular-Komponente, die zum Erstellen neuer Kontakte oder Aktualisieren von Kontakten verwendet werden könnte. Ich habe einen Speicher, der verfolgt, welchen Kontakt ein Benutzer bearbeiten möchte, genannt contactToEdit, und ich weise es einer berechneten Variablen zu, die contact genannt wird. Ich habe aber auch ein Datenmodell contact, das verwendet wird, wenn der Benutzer einen Kontakt hinzufügen möchte. Wenn ich die Komponente zum Hinzufügen eines Kontakts verwende, kann ich dann die berechnete Kontaktvariable überschreiben (da sie zu diesem Zeitpunkt nicht definiert ist)? Oder kann ich der Komponente konditionell mitteilen, die contact aus dem Vuex-Store im Vergleich zu dem Standard-Kontaktmodus zu verwenden? Hier ist meine vue Komponente als Referenz:

<template> 
    <form class="padded-form"> 
     <div class="form-group"> 
     <label for="">First Name</label> 
     <input type="text" class="form-control" id="" v-model="contact.first_name"> 
     </div> 
     <div class="form-group"> 
     <label for="">Last Name</label> 
     <input type="text" class="form-control" id="" v-model="contact.last_name"> 
     </div> 
     <div class="form-group"> 
     <label for="">Email</label> 
     <input type="text" class="form-control" id="" v-model="contact.contact_email"> 
     </div> 
     <div class="form-group"> 
     <label for="">Phone #</label> 
     <input type="text" class="form-control" id="" v-model="contact.contact_phone_number"> 
     </div> 
     <div class="form-group"> 
     <label for="">Notes</label> 
     <textarea class="form-control" id="" rows="4" v-model="contact.contact_notes"></textarea> 
     </div> 
     <div class="d-flex justify-content-center"><button class="btn btn-primary btn" v-if="adding" @click="addContact(contact)">Submit</button></div> 
     <div class="d-flex justify-content-center"><button class="btn btn-primary btn" v-if="editing" @click="saveContact(contact)">Save</button></div> 
    </form> 
</template> 

<script> 

import { mapGetters } from 'vuex' 

export default { 
    data() { 
    return { 
     contact: { 
     first_name: '', 
     last_name: '', 
     contact_email: '', 
     contact_phone_number: '', 
     contact_notes: '' 
     } 
    } 
    }, 
    computed: { 
    ...mapGetters({ 
     contact: 'contactToUpdate', 
     editing: 'editingContact', 
     adding: 'addingContact', 
    }) 
    }, 
} 
</script> 

Answer 1

Nun, haben Sie bereits addContact(contact) Methode in der Vorlage definiert. Innerhalb dieser Methode können Sie Ihre Vuex-Mutation festschreiben, die die Vuex-Statuseigenschaft 'contact' überschreibt. Wenn Sie also auf eine Schaltfläche klicken, wird der Status mutiert und Ihre contact Getter-Aktualisierung wird aktualisiert. Oder vielleicht habe ich deine Frage missverstanden?