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