如何覆盖 vuex 存储数据
How to override vuex store data
我有一个可重复使用的 vue.js 联系人表单组件,可用于创建新联系人或更新联系人。我有一个商店,用于跟踪用户想要编辑的联系人,名为 contactToEdit
,我将其分配给一个名为 contact
的计算变量。但是,我还有一个名为 contact
的数据模型,当用户想要添加联系人时会使用它。因此,当我使用组件添加联系人时,有没有办法覆盖计算的联系人变量(因为此时它是未定义的)?或者我可以有条件地告诉组件使用 vuex 商店中的 contact
与默认联系方式吗?这是我的 vue 组件供参考:
<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>
好吧,您已经在模板中定义了 addContact(contact)
方法。在此方法中,您可以提交覆盖 'contact' Vuex 状态 属性 的 Vuex 突变,因此当您单击按钮时,状态会发生突变并且您的 contact
getter 会更新。或者我误解了你的问题?
我有一个可重复使用的 vue.js 联系人表单组件,可用于创建新联系人或更新联系人。我有一个商店,用于跟踪用户想要编辑的联系人,名为 contactToEdit
,我将其分配给一个名为 contact
的计算变量。但是,我还有一个名为 contact
的数据模型,当用户想要添加联系人时会使用它。因此,当我使用组件添加联系人时,有没有办法覆盖计算的联系人变量(因为此时它是未定义的)?或者我可以有条件地告诉组件使用 vuex 商店中的 contact
与默认联系方式吗?这是我的 vue 组件供参考:
<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>
好吧,您已经在模板中定义了 addContact(contact)
方法。在此方法中,您可以提交覆盖 'contact' Vuex 状态 属性 的 Vuex 突变,因此当您单击按钮时,状态会发生突变并且您的 contact
getter 会更新。或者我误解了你的问题?