Electron使用指南——13显示列表

屏幕快照的图片获取生成以后，将返回的信息显示在列表里。

1、重新规划 Store

重新规划 Store, 使用 Vuex 模块来分开管理数据。在 /src/store/ 创建 modules 文件夹, 在文件里创建 main.js 与 modal.js 两个文件。将 /src/store/index.js 文件里的代码迁移到 modal.js 里，做修改。三个文件的内容如下：

1.1 index.js

修改 /src/store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import modal from './modules/modal'
import main from './modules/main'

export default new Vuex.Store({
  modules: {
    modal,
    main
  }
})

1.2 modal

编辑 /src/store/modules/modal.js

const state = {
  isShowModal: false
}

const mutations = {
  setModalVisible(state, show) {
    state.isShowModal = show
  }
}

const actions = {
  setModalVisible({commit}, show) {
    commit('setModalVisible', show)
  }
}

export default {
  state,
  mutations,
  actions
}

1.3 main.js

编辑 main.js，提供 Main.vue 管理的数据：

import store from 'store'

const state = {
  items: []
}

const mutations = {

  setItems(state, item) {

    state.items.push({
      id: new Date().getTime(),
      ...item
    })

    // 数据缓存
    store.set('items', state.items)
  },

  initItems(state, items) {
    state.items = items
  }
}

const actions = {
  setItems({commit}, item) {
    commit('setItems', item)
  },

  initItems({commit}, items) {
    commit('initItems', items)
  }
}

export default {
  state,
  mutations,
  actions
}

2、修改 Modal.vue

/src/components/Modal.vue 获取到数据后，装填到 Store 中：

3、修改 Main.vue 组件

修改 /src/components/Main.vue 组件，用来响应的显示 Store 里的 items 数据。