您的位置:首页 > 其它

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

2020-09-02 13:41 260 查看 https://blog.csdn.net/guduzhon

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

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: