小小千想和您聊一聊

当前位置: 首页> 技术分享> Electron使用指南之显示列表

Electron使用指南之显示列表

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

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>


上一篇:Electron使用指南之获得屏幕快照

下一篇:Electron使用指南之打开网站窗口

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码