Vuex 状态在不重新加载的情况下不会更新答案

【问题标题】：Vuex state not update without reloadVuex 状态在不重新加载的情况下不会更新
【发布时间】：2020-09-16 06:58:14
【问题描述】：

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

当我单击“添加”按钮时，我可以看到在页面上创建了哪些字段但未处于状态（状态还没有我刚刚添加的此字段）但是如果我刷新页面状态添加到自己这个字段。问题：这是正确的吗？还是视情况而定？我需要直接更新状态吗？
我删除了一些代码，因为当我使用大量代码时我无法询问。

【问题讨论】：

您的 state 配置看起来不正确（contacts 是什么？）并且您从未在您的突变中更改 state 上的任何内容
你的getContact getter 在哪里？
我更改了引用该州的联系人
const contacts = ... 并没有真正告诉我任何事情。请提供一些细节
``` [ { id: 'ssfg', fields: [ { fieldName: 'ФИО', fieldValue: 'Иванов Иван' }, { fieldName: 'Номер телефона', fieldValue: '+79523695475 ' } ] } ] ``` 我使用插件来保存对状态的更改，但您可以在上面看到默认状态

标签： vue.js vuejs2 vuex

【解决方案1】：

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

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

【讨论】：

这是如何做到最好的问题。我更改了引用此对象的状态，但这是最佳做法吗？
使用vuex 始终是最佳实践。我会将contacts 的初始化移动到状态内部，并在每次发生某些事情时更新数组。像这样，我将确保我也可以更改整个数组以及从中编辑部分。此外，您拥有的 getter 将始终获取最新的记录，因为您已经通过您的状态更改了它。（我个人的喜好，这就是我处理这个 CRUD 操作的方式）