Question

我正在尝试使用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（）以直接显示属性，而不是对象引用。

Answer 1

据我所知，没有命令在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。在代码中，它们似乎是相同的对象，因此我希望它们在扩展时是相同的。此外，一个对象显示了反应性吸气剂和吸气剂的证据，而另一个则没有。我可以推测为什么会这样，但很可能是由于未提供的代码引起的。

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

严格模式仅适用于更改存储区state中的属性。直到发生突变后，此处考虑的对象才被保存在存储state中。因此，如果要在突变运行之前更改id，就不会触发有关严格模式的警告。

Answer 2

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

变异有效负载会自行改变vuex存储变异中的值

2 个答案: