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 中：

<script>
import { mapState, mapActions } from 'vuex'
export default {
  // ...
  created() {
    ipcRenderer.on('new-item-success', (e, newItem) => {

      this.setItems(newItem)

      // ...
    })
  },

  methods: {
    ...mapActions(['setModalVisible', 'setItems'])

    // ...
  },
}
</script>

3、修改 Main.vue 组件

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

<template>
  <main>
    <p id="no-item">暂无数据。</p>
    <div id="items">
      <div 
        v-for="(item, index) in items"
        :key="item.id"
        class="read-item"
        :class="{selected: index === currentIndex}"
        @click="changeIndex(index)"
      >
        <img :src="item.screenshot" alt="item.title">
        <h2>{{item.title}}</h2>
      </div>
    </div>
  </main>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import store from 'store'

export default {
  data() {
    return {
      currentIndex: 0
    }
  },

  created() {
    let items = store.get('items') || []
    this.initItems(items)
  },

  computed: {
    ...mapState({
      items: state => state.main.items
    })

    // ...
  },

  methods: {
    ...mapActions(['initItems']),

    changeIndex(index) {
      this.currentIndex = index
    }
  },
}
</script>

<style lang='stylus' scoped>
#items
  flex-grow 1

#no-item
  font-weight bold
  color silver 
  text-align center
  width 100%
  position absolute
  top 100px
  z-index -1

.read-item
  display flex
  align-items center
  align-content center
  border-bottom lightgray 2px solid 
  background #fafafa
  padding 10px
  border-left 10px solid lightgray
  -webkit-user-select none
  img 
    width 20%
    margin-right 25px
    border solid 1px #ccc
  &:hover
    background #eee
  &.selected
    border-left-color dodgerblue
</style>