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

搜索信息的思路：在 /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>