您的位置:首页 > 其它

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

GUDUzhongliang 2020-09-04 14:30 357 查看 https://blog.csdn.net/guduzhon

搜索信息的思路:在 

/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>
标签: