javascript - 基于 Electron-vue 的 Electron 应用中 Vuex 突变的奇怪行为

Question

我正在尝试使用 Vue 和 Electron 构建一个简单的任务管理应用程序。我的设置基于 electron-vue boilerplate与 Vuex 商店。用户可以通过模式向列表添加新项目(并编辑现有项目)。该模式将信息发送到存储操作，然后调用突变来更新存储并将新项目推送到列表项目数组。

这是设置:LayerItem是Layer的 child 这是 LayerMap 的子项。从父级 LayerMap 内的存储接收数据组件，然后通过 props 提供给子组件。

重现问题:通过showEditItemDialog创建一个新项目在Layer成分。 SAVE_LAYER_ITEM内突变，将创建一个新的 ID 并将其分配给该新项目。之后，新项目将被推送到 layer.items大批。 UI 将更新并且创建的项目可见。 item.text显示正确。 item.id然而不同的是。我包括了 console.log突变内。记录的 ID 与 LayerItem 内 UI 中显示的 ID 不匹配此处组件 <p>{{ item.id }}</p> 。因此，当尝试在创建新项目后对其进行编辑/更新时，突变将创建一个新项目，而不是更新现有项目，因为在存储数组中找不到模态接收到的 ID。

我知道代码很多，我尝试删除尽可能多的不必要的代码。在下面的示例中，我创建了一个新项目“test”，您可以看到存储的 ID 与 UI 中显示的 ID 不匹配。

终端日志的屏幕截图

DevTools 控制台的屏幕截图

来自 Vue DevTools 商店的屏幕截图

用户界面的屏幕截图

LayerMap.vue

// 'layers' is a computed property and gets data from the store
        <draggable
          v-model="layers"
          v-bind="getDragOptions"
        >
          <Layer v-for="(layer, index) in layers" :key="index" :layer="layer"></Layer>
        </draggable>
        <DetailsModal></DetailsModal>

// Inside computed
  computed: {
    layers() {
      return this.$store.getters.allLayers
    }
  }

图层.vue

// 'layer' gets passed from parent as prop
     <span primary-focus @click="showEditItemDialog">Add Item</span> 
     <draggable v-model="items" v-bind="dragOptions" class="items">
        <LayerItem v-for="item in items" :item="item" :layer="layer" :key="item.id"></LayerItem>
      </draggable>

// 'items' is a computed property
    items: {
      get() {
        return this.layer.items
      }
    }

// Function to handle 'Add Item' click and send event which will be handled by DetailsModal.vue
  methods: {
    showEditItemDialog() {
      let payload = {
        layer: this.layer,
        item: {
          id: '',
          text: ''
        }
      }
      this.$bus.$emit('item-editing', payload)
    }
  }

LayerItem.vue

// Layer Item Component
  <div class="layer-item" @click.prevent="startEditing">
    <div class="item-body">
      <p>{{ this.item.text }}</p>
      <p>{{ item.id }}</p>
    </div>
  </div>

// Event will be sent on click with layer item details as parameter
  methods: {
    startEditing() {
      let payload = {
        layer: this.layer,
        item: {
          id: this.item.id,
          text: this.item.text
        }
      }
      this.$bus.$emit('item-editing', payload)
    }
  }
}

详细信息Modal.vue

// 'editLayerForm' contains layer item id and text
      <p>{{editLayerForm.id}}</p>
      <div class="bx--form-item">
        <input
          type="text"
          v-model="editLayerForm.text"
        />
      </div>

// Inside <script>, event is received and handled, 'editLayerForm' will be updated with payload information
  mounted() {
    this.$bus.$on('item-editing', this.handleModalOpen)
  },
  methods: {
    handleModalOpen(payload) {
      this.layer = payload.layer
      this.editLayerForm.id = payload.item.id
      this.editLayerForm.text = payload.item.text
      this.visible = true
      console.log('editing', payload)
    },
    handleModalSave() {
      let payload = {
        layerId: this.layer.id,
        item: {
          id: this.editLayerForm.id,
          text: this.editLayerForm.text
        }
      }
      console.log('save', payload)
      this.$store.dispatch('saveLayerItem', payload)
    }
  }

商店.js

const actions = {
  saveLayerItem: ({ commit }, payload) => {
    console.log('action item id', payload.item.id)
    commit('SAVE_LAYER_ITEM', payload)
  }
}

const mutations = {
  SAVE_LAYER_ITEM: (state, payload) => {
    let layer = state.map.layers.find(l => l.id === payload.layerId)
    let itemIdx = layer.items.findIndex(item => item.id === payload.item.id)
    console.log('mutation item id', payload.item.id)

    if (itemIdx > -1) {
      // For existing item
      console.log('update item', payload.item)
      Vue.set(layer.items, itemIdx, payload.item)
    } else {
      // For new item
      payload.item.id = guid()
      console.log('save new item', payload.item)
      layer.items.push(payload.item)
    }
  }
}

Answer 1

以前从未构建过 Electron 应用程序，所以我花了一些时间来深入挖掘，但我想我明白了! :)

每个 Electron 应用程序至少有 2 个进程 - 主进程(负责打开浏览器窗口)和渲染器(Vue 应用程序运行的地方)。如果您在代码中使用 console.log，输出显示 depends on which process called it - 从主进程调用的 console.log 仅显示在终端窗口中(用于在开发模式下启动应用程序)，console.log从渲染器进程调用仅显示在开发工具中。

但是你的突变日志出现在两者中!这意味着代码必须在两个进程中运行，对吗？但如何呢？

看来，electron-vue模板有一个选项(您必须在设置项目时打开)来使用 vuex-electron ，特别是它的 createSharedMutations 插件。它可用于在主进程和所有渲染器进程之间共享相同的 Vuex 存储(从技术上讲，每个进程都有自己的存储，但状态是同步的)。它的工作原理是这样的:

1. 您触发操作(在渲染器进程中)
2. 操作在渲染器进程中被取消(这就是为什么您在开发工具中看不到来自操作的任何日志)，并通知主进程执行该操作。
3. 现在，如果该操作(在主程序中运行)提交了突变，则突变代码将在主进程中执行(带有来自终端的日志的第一个屏幕截图 - id 为空)，然后是有效负载(现在使用新生成的 id A) 被序列化为 JSON ( see ipc-renderer ) 并传递给每个渲染器进程以执行相同的突变(因此保持所有存储同步)。在这里，您的突变被执行了第二次(带有来自 DevTools 的日志的第二张屏幕截图) - item 已分配了 id (A)，但它不在项目列表中，因此您的代码分配new id (B) 并将其插入集合中。
4. id B 在屏幕上呈现
5. 现在，如果您开始编辑并调用保存操作，第 3 点中描述的所有内容都会再次发生，但现在在主流程中执行的突变会看到带有 id B 的项目，该项目不在其项目集合中。因此它分配新的 id (C 覆盖 B)，因此在渲染器进程中执行的突变再次看到带有 id C 的项目，该项目不在集合中......等等<

解决方案显然是在商店配置中禁用 createSharedMutations 插件(应位于 /renderer/store/index.js 中)。如果您确实需要跨主进程/渲染器进程同步存储，则需要重写您的突变...