title: How to override vuex store data
body: <p>I have a reusable vue.js contact form component that could be used for creating new contacts or updating contacts. I have a store that keeps track of which contact a user wants to edit called <code>contactToEdit</code> and I assign it to a computed variable called <code>contact</code>. However, I also have a data model called <code>contact</code>, which gets used when the user wants to add a contact. Therefore, when I am using the component to add a contact, is there a way I can override the computed contact variable (since it will be undefined at this point)? Or can I conditionally tell the component to use the <code>contact</code> from the vuex store vs. the default contact modal? Here is my vue component for reference:</p>
  
  <pre><code>&lt;template&gt;
      &lt;form class="padded-form"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for=""&gt;First Name&lt;/label&gt;
          &lt;input type="text" class="form-control" id="" v-model="contact.first_name"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for=""&gt;Last Name&lt;/label&gt;
          &lt;input type="text" class="form-control" id="" v-model="contact.last_name"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for=""&gt;Email&lt;/label&gt;
          &lt;input type="text" class="form-control" id="" v-model="contact.contact_email"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for=""&gt;Phone #&lt;/label&gt;
          &lt;input type="text" class="form-control" id="" v-model="contact.contact_phone_number"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for=""&gt;Notes&lt;/label&gt;
          &lt;textarea class="form-control" id="" rows="4" v-model="contact.contact_notes"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="d-flex justify-content-center"&gt;&lt;button class="btn btn-primary btn" v-if="adding" @click="addContact(contact)"&gt;Submit&lt;/button&gt;&lt;/div&gt;
        &lt;div class="d-flex justify-content-center"&gt;&lt;button class="btn btn-primary btn" v-if="editing" @click="saveContact(contact)"&gt;Save&lt;/button&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  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',
      })
    },
  }
  &lt;/script&gt;
  </code></pre>