如何覆盖 vuex 存储数据答案

【问题标题】：How to override vuex store data如何覆盖 vuex 存储数据
【发布时间】：2017-09-04 08:08:18
【问题描述】：

我有一个可重用的 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>

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

好吧，您已经在模板中定义了addContact(contact) 方法。在此方法中，您可以提交覆盖 'contact' Vuex 状态属性的 Vuex 突变，因此当您单击按钮时，状态会发生突变并且您的 contact getter 会更新。还是我误解了你的问题？

【讨论】：