Javascript 变异负载在vuex存储变异中自行更改值

我正试图用VueJS使用样板构建一个电子应用程序。我有一个变异，它根据收到的有效载荷更新部分状态

但是，在操作调用和变异之间的某个地方，属性

payload.myItem.id

会毫无目的地更改。 该操作由Vue模态组件调用：

    handleModalSave() {
      let payload = {
        layerId: this.layer.id,
        myItem: {
          id: this.editLayerForm.id,
          text: this.editLayerForm.text
        }
      }
      console.log('save', payload.myItem.id)
      this.$store.dispatch('addLayerItem', payload)
    }

以下是所说的作用和突变：

  // Action
  addLayerItem: ({ commit }, payload) => {
    commit('ADD_LAYER_ITEM', payload)
  }

  // Mutation
  ADD_LAYER_ITEM: (state, payload) => {
    console.log('mutation', payload.myItem.id)
    let layer = state.map.layers.find(layer => layer.id === payload.layerId)

    if (payload.myItem.id !== '') {
      // Existing item
      let itemIdx = layer.items.findIndex(item => item.id === payload.myItem.id)
      Vue.set(layer.items, itemIdx, payload.myItem)
    } else {
      // New item
      payload.myItem.id = state.cnt
      layer.items.push(payload.myItem)
    }
  }

以下是控制台日志的屏幕截图：

就我所见，在

console.log（'save'，payload）

和

console.log（'mutation'，payload）

之间没有命令更改

myItem.id

。我使用严格模式，因此在变异之外没有其他函数改变值

编辑
我更新了console.logs（）以直接显示属性，而不是对象引用

就我所见，在

console.log（'save'，payload）

和

console.log（'mutation'，payload）

之间没有命令更改

myItem.id

它不需要在控制台日志记录之间进行更改

在您发布的图片中，您将在控制台日志旁边看到一个蓝色的小i图标。如果您将鼠标悬停在上面，您将得到一个解释，说明显示的值刚刚经过计算

当您将一个对象记录到控制台时，它会获取对该对象的引用。它不需要拷贝。有几个原因可以解释为什么复印不实用，所以它甚至不尝试

当您通过在控制台中单击来展开该对象时，它会在您单击时获取其属性的内容。这可能与记录对象时的值不同

如果您想知道记录时的值，那么可以使用

JSON.stringify

将对象转换为字符串。然而，这假设它可以安全地转换为JSON，这并不是普遍正确的

另一种方法是更改日志记录以直接针对您关心的属性<代码>控制台.log（payload.myItem.id）。这将通过只记录不可变的字符串/数字来避免日志记录处于活动状态的问题

更改

id

的行似乎是：

payload.myItem.id=state.cnt

如前所述，在日志记录之后发生这种情况与此无关。控制台尚未获取该属性的值。它只引用了

有效负载

对象

对我来说唯一的谜团是，您登录到控制台的两个对象都没有更新以反映新id。在代码中，它们似乎是同一个对象，因此我希望在您展开它们时它们是相同的。此外，其中一个对象显示了反应式getter和setter的证据，而另一个则没有。我可以推测为什么会这样，但很可能是因为没有提供代码

我使用严格模式，因此在变异之外没有其他函数改变值

严格模式仅适用于更改存储

状态

中的属性。在变异之前，此处考虑的对象不会保存在存储

状态

。因此，如果在变异运行之前改变

id

，它不会触发关于严格模式的警告

就我所见，在

console.log（'save'，payload）

和

console.log（'mutation'，payload）

之间没有命令更改

myItem.id

它不需要在控制台日志记录之间进行更改

在您发布的图片中，您将在控制台日志旁边看到一个蓝色的小i图标。如果您将鼠标悬停在上面，您将得到一个解释，说明显示的值刚刚经过计算

当您将一个对象记录到控制台时，它会获取对该对象的引用。它不需要拷贝。有几个原因可以解释为什么复印不实用，所以它甚至不尝试

当您通过在控制台中单击来展开该对象时，它会在您单击时获取其属性的内容。这可能与记录对象时的值不同

如果您想知道记录时的值，那么可以使用

JSON.stringify

将对象转换为字符串。然而，这假设它可以安全地转换为JSON，这并不是普遍正确的

另一种方法是更改日志记录以直接针对您关心的属性<代码>控制台.log（payload.myItem.id）。这将通过只记录不可变的字符串/数字来避免日志记录处于活动状态的问题

更改

id

的行似乎是：

payload.myItem.id=state.cnt

如前所述，在日志记录之后发生这种情况与此无关。控制台尚未获取该属性的值。它只引用了

有效负载

对象

对我来说唯一的谜团是，您登录到控制台的两个对象都没有更新以反映新id。在代码中，它们似乎是同一个对象，因此我希望在您展开它们时它们是相同的。此外，其中一个对象显示了反应式getter和setter的证据，而另一个则没有。我可以推测为什么会这样，但很可能是因为没有提供代码

我使用严格模式，因此在变异之外没有其他函数改变值

---

严格模式仅适用于更改存储

状态

中的属性。在变异之前，此处考虑的对象不会保存在存储

状态

。因此，如果在变异运行之前改变了

id

，它不会触发关于严格模式的警告。

好的，我找到了问题的根本原因。Vuex已配置为使用t