项目中的导航栏搜索及搜索页面的思路

2,974 阅读2分钟

项目背景

今天项目里的实习生在做搜索功能时,导航栏的搜索框与搜索页面的搜索框,在内容上竟然是各自独立的。。。。。

无论他怎么鼓捣,在搜索栏上进行搜索,搜索页面都没有任何反应。他解释说因为是两个独立的组件且不构成父子关系,所以无法进行值的传递共用,即便使用路由传参,也就第一次能获取到并触发请求,后续搜索框再搜索内容,也无法再次触发搜索请求(其实,watch是可以做到的。。。。)

考虑到整个项目的统一性,以及未来的需求可变性(简单来说,就是以防万一产品又出幺蛾子),整个项目的搜索功能,我更倾向于用vuex来做

思路简介

通过vuex来实现全局搜索功能的数据共用,假设你已经学过10分钟的vuex(完全没学过的。。。先去看个10分钟教程先)

代码简单实现


<!--首先编写一个简单的搜索模块-->
const search = {
    state: {
        searchKey: ''
    },
    mutations: {
        SET_SEARCH_KEY(state,key) {
            state.searchKey = key
        }
    },
    actions: {
        setSearchKey(context,key) {
            context.commit('SET_SEARCH_KEY',key)
        }
    }
}
export default search

<!--再将这个search模块导入到store文件中-->
import Vue from 'vue'
import Vuex from 'vuex'
import search from './modules/search'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        search
    }
})
<!--上面的写法可能跟你看的新手教程不太一样,因为实际项目里需要用到vuex的地方蛮多的,因此整体内容量也比较大,所以一般都会采用分modules的形式,方便管理也方便后续继续扩展-->
export default store

<!--最后就是在main.js中注册它啦-->
import Vue from 'vue'
import router from './router'
import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

到目前为止,简单的搜索模块就做好了,那么该如何使用呢?
分成两部分,一个是导航栏有搜索框,一个是搜索页有搜索框也有搜索结果列表

<!--假设这里是导航栏的搜索框-->
<template>
    <div>
        <input v-model="inputKey" @keyup.enter.native="handleKey"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inputKey: ''// 这里就是搜索的关键字
        }
    },
    methods: {
        handleKey() {
            // 在这里,调用store里search模块的setSearchKey方法
            this.$store.dispatch('setSearchKey', this.inputKey)
        }
    }
}
<!--基本逻辑就是,在导航栏的搜索框里输入内容,点击回车,触发search()方法,调用store里search模块的setSearchKey方法,最终实现关键字searchKey的改变-->
</script>

<!--假设这里是搜索页的结果列表-->
<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item">{{item}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: []// 结果列表
            searchText: ''// 一般我们不建议直接修改store里的值,因此最好用另一个变量储存
        }
    },
    computed: {
        <!--实时获取store里的searchKey-->
        searchKey() {
            this.$store.state.search.searchKey
        }
    }
    watch: {
        <!--监听searchKey,一旦该值有变化,立刻触发相应操作-->
        searchKey(val){
            this.searchText = val
            this.search()
        }
        
    }
    methods: {
        search() {
            // 在这里,真正地向后台发起请求
            axios.get(url,this.searchText).then((res) => {
                this.list = res.list
            })
        }
    }
}
</script>

到这里为止,就可以成功实现,在导航栏的搜索框进行搜索,搜索页面也能立刻显示最新内容(即使两个组件之间不构成父子组件),例如掘金的导航栏搜索, 底下的结果列表的变化