搜索信息的思路：在 /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腌且，獲取關鍵字和修改數(shù)據渲染數(shù)據源梗肝。
<template>
<main>
// ...
<div id="items">
<div
v-for="(item, index) in filteredItems"
// ...
>
// ...
</div>
</div>
</main>
</template>
<script>
// ...
export default {
// ...
computed: {
// ...
...mapGetters(['filteredItems'])
},
// ...
}
</script>
