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

：

[code]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

[code]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 管理的数据：

[code]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

 中：

[code]<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

 数据。

[code]<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>