Electron使用指南——16搜索信息

客官°小女子只卖身不卖艺 2023-10-06 14:42 39阅读 0赞

搜索信息的思路：在 `/src/components/Header.vue` 组件里获取到用户从搜索框里的关键字(keyword)，保存在 `Store` 里，再做个 `getter` , 过滤 `items` 信息，修改 `Main.vue` 组件的渲染信息源。

#### 1、定制 Store ####

修改 `src/store/modules/main.js`：

// ...
    
    const state = {
      // ...
      keywords: ''
    }
    
    const mutations = {
      // ...
    
      changeKeywords(state, keywords) {
        state.keywords = keywords
      }
    }
    
    const actions = {
      // ...
    
      changeKeywords({commit}, keywords) {
        commit('changeKeywords', keywords)
      }
    }
    
    const getters = {
      filteredItems(state) {
        if (state.keywords) {
          return state.items.filter((value, index) => {
            return value.title.indexOf(state.keywords) != -1
          })
        }
    
        return state.items
      }
    }
    
    export default {
      // ...
    
      getters
    }

#### 2、修改 Header.vue ####

处理 `/src/componnent/Header.vue` 的 keywords 信息获取与存储：

<template>
      <header>
        // ...
        <input type="text" @keyup.enter="searchItem" v-model="keywords" id="search" placeholder="搜索...">
      </header>
    </template>
    
    <script>
    import { mapActions } from 'vuex'
    export default {
      data() {
        return {
          keywords: ''
        }
      },
    
      methods: {
        ...mapActions(['setModalVisible', 'changeKeywords']),
    
        searchItem() {
          this.changeKeywords(this.keywords)
        }
      },
    }
    </script>

#### 3、修改 Main.vue ####

修改 `/src/components/Main.vue`，获取关键字和修改数据渲染数据源。

<template>
      <main>
        // ...
        <div id="items">
          <div 
            v-for="(item, index) in filteredItems"
            // ...
          >
            // ...
          </div>
        </div>
      </main>
    </template>
    
    <script>
    // ...
    export default {
      // ...
    
      computed: {
        // ...
    
        ...mapGetters(['filteredItems'])
      },
    
      // ...
    }
    </script>