1

我正在尝试使用electron-vue样板构建一个带有 VueJS 的 Electron 应用程序。我有一个突变，它根据接收到的有效负载更新部分状态。

然而，在动作调用和突变之间的某个地方，属性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)
    }
  }

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

据我所知，没有命令可以在和myItem.id之间切换。我使用严格模式，因此没有其他函数可以更改突变之外的值。console.log('save', payload)console.log('mutation', payload)

编辑
我更新了 console.logs() 以直接显示属性而不是对象引用。

4

2 回答 2

0

据我所知，没有命令可以在和myItem.id之间切换。console.log('save', payload)console.log('mutation', payload)

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

在您发布的图片中，您会在控制台日志记录旁边看到一个小的蓝色 i 图标。如果你将鼠标悬停在上面，你会得到一个解释，显示的值刚刚被评估。

当您将对象记录到控制台时，它会获取对该对象的引用。它不需要副本。复制不实用的原因有很多，因此它甚至不尝试。

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

如果您想知道记录时的值，则可以使用JSON.stringify将对象转换为字符串。然而，假设它可以安全地转换为 JSON，这并不普遍。

另一种方法是更改​​日志记录以直接针对您关心的属性。console.log(payload.myItem.id). 这将通过只记录不可变的字符串/数字来避免日志记录的问题。

更改的行id似乎是：

payload.myItem.id = state.cnt

正如已经讨论过的，这在日志记录之后发生是无关紧要的。控制台尚未获取该属性的价值。它只有对payload对象的引用。

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

我使用严格模式，因此没有其他函数可以更改突变之外的值。

严格模式仅适用于更改 store 中的属性state。state这里考虑的对象直到突变之后才被保存。因此，如果要在突变运行之前更改某些内容，id则不会触发有关严格模式的警告。

于 2019-11-27T02:28:42.673 回答
0

好的，我找到了问题的根本原因。Vuex 被配置为使用createPersistedState在本地存储中存储数据的插件。不知何故，这是一个问题，数据在实际存储和本地存储之间混淆了。在 main.js 中添加一个简单window.localStorage.clear()的解决了问题！

于 2019-11-27T23:19:38.423 回答