Question

  <template>
    <ContactField
      v-for="(field, $fieldIndex) in contact.fields"
      :key="$fieldIndex"
      :fieldIndex="$fieldIndex"
      :contact="contact"
      :fieldName="field.fieldName"
      v-model="field.fieldValue"
    />
    <div>
      Add field
      <input type="text" v-model="newFieldName" />
      <input type="text" v-model="newFieldValue" />
      <button @click="addFieldToContact">Add</button>
    </div>
    <div>
      <button @click="saveChanges">Save</button>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      newFieldName: '',
      newFieldValue: '',
    }
  },
  components: {
    ContactField
  },
  computed: {
    id() {
      return this.$route.params.id
    },
    ...mapGetters(['getContact']),
    contact() {
      return this.getContact(this.id)
    }
  },
  methods: {
    addFieldToContact() {
      this.$store.commit('ADD_FIELD', {
        contact: this.contact,
        fieldName: this.newFieldName,
        fieldValue: this.newFieldValue
      })
      this.newFieldName = ''
      this.newFieldValue = ''
    }
  }
}

Vuex商店

const contacts = ...
export default new Vuex.Store({
  state: {
    contacts
  },
  mutations: {
    ADD_FIELD(state, { contact, fieldName, fieldValue }) {
      contact.fields.push({
        fieldName: fieldName,
        fieldValue: fieldValue
      })
    }
  },
getters: {
    getContact: state => id => {
      for (const contact of state.contacts) {
        if (contact.id == id) {
          return contact
        }
      }
    }
  }
})

当我单击“添加”按钮时，我可以看到在页面上创建了哪些字段，但是没有处于状态（状态不是我刚刚添加的该字段），但是如果我刷新页面状态，请向自己添加此字段。问题：这是正确的吗？还是取决于情况？我需要直接更新状态吗？
我删除了一些代码，因为我不能问我何时使用很多代码。

Answer 1

您的contacts不会通过状态更改。您正在将新的object推送到传递给ADD_FIELD方法的变量。

也许您可以尝试在contact数组中查找并替换contacts。或者，如果是新书，只需将其推入contacts。这应该在您的ADD_FIELD(...)方法的末尾发生。

不重新加载Vuex状态不会更新

1 个答案: