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

柔情只为你懂 2022-12-03 08:45 195阅读 0赞

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

### 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` 数据。

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