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

项目背景

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

不管他怎么鼓捣，在搜索栏上进行搜索，搜索页面都没有任何反应。他解释说由于是两个独立的组件且不构成父子关系，因此没法进行值的传递共用，即使使用路由传参，也就第一次能获取到并触发请求，后续搜索框再搜索内容，也没法再次触发搜索请求（其实，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>
复制代码

到这里为止，就能够成功实现，在导航栏的搜索框进行搜索，搜索页面也能马上显示最新内容（即便两个组件之间不构成父子组件），例如掘金的导航栏搜索， 底下的结果列表的变化