如何覆蓋vuex商店數據

我有一個可重複使用的vue.js聯繫表單組件，可用於創建新聯繫人或更新聯繫人。我有一家商店可以跟蹤用戶想要編輯的聯繫人名爲contactToEdit，並將其分配給一個名爲contact的計算變量。但是，我也有一個名爲contact的數據模型，在用戶想要添加聯繫人時使用該模型。因此，當我使用組件添加聯繫人時，是否有一種方法可以重寫計算出的聯繫變量（因爲此時它將不確定）？或者，我是否可以有條件地告訴組件使用vuex商店中的contact與默認聯繫模式？下面是我的參考VUE組件：如何覆蓋vuex商店數據

<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>

來源

2017-04-09 Trung Tran

好了，你已經在你的模板中定義addContact(contact)方法。在這個方法裏面，你可以提交你的Vuex突變，它會覆蓋'contact'Vuex狀態屬性，所以當你點擊一個按鈕時，狀態會發生變化，並且你的getter更新。或者，也許我誤解了你的問題？

來源

2017-04-09 07:46:58 wostex

如何覆蓋vuex商店數據

回答

相關問題