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>