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

搜索信息的思路：在 

/src/components/Header.vue

 组件里获取到用户从搜索框里的关键字(keyword)，保存在 

Store

 里，再做个 

getter

 , 过滤 

items

 信息，修改 

Main.vue

 组件的渲染信息源。

1、定制 Store

修改 

src/store/modules/main.js

：

[code]// ...

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 信息获取与存储：

[code]<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

，获取关键字和修改数据渲染数据源。

[code]<template>
<main>
// ...
<div id="items">
<div
v-for="(item, index) in filteredItems"
// ...
>
// ...
</div>
</div>
</main>
</template>

<script>
// ...
export default {
// ...

computed: {
// ...

...mapGetters(['filteredItems'])
},

// ...
}
</script>