Project background

When the intern in today’s project was doing the search function, the search box in the navigation bar and the search box in the search page were actually independent in terms of content…

No matter what he did, he searched on the search bar, and the search page didn’t respond. He explained that because the two components are independent and do not constitute a parent-child relationship, so the value cannot be passed and shared. Even if the route is used to pass parameters, it can get and trigger the request for the first time, and then the search box can search for the content again, but it cannot trigger the search request again (actually, watch can do this…).

I prefer to use Vuex for the entire project search function, given the unity of the whole project, and the variability of future requirements (in short, just in case the product goes wrong again)

Introduction of ideas

Use vuex to share data for the global search function, assuming you’ve already learned 10 minutes of VUex. Go see a 10-minute lesson first)

Simple code implementation


<! 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
Copy the code


<! Import the search module into the store file --> import Vue from'vue'
import Vuex from 'vuex'
import search from './modules/search'Vue.use(Vuex) const store = new Vuex.Store({ modules: { search } }) <! -- The above writing method may be different from the tutorial you see, because the actual project needs to use vuex place quite a lot, so the overall capacity is also relatively large, so generally will use modules form, convenient management is convenient to continue to expand -->export default store
Copy the code


<! Import Vue from import Vue from'vue'
import router from './router'
import store from './store'

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

Copy the code

So far, the simple search module has worked, but how do you use it? It’s divided into two parts, one is a navigation bar with a search box, and the other is a search page with a search box and a list of search results

<! <template> <div> <input v-model="inputKey" @keyup.enter.native="handleKey"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inputKey: ' '}}, methods: {handleKey() {// Here, call the search module in the storesetThis SearchKey method.$store.dispatch('setSearchKey', this.inputKey) } } } <! The basic logic is to type in the search box in the navigation bar, hit Enter, trigger the search() method, and call the search module in the StoresetSearchKey --> </script>Copy the code


<! <template> <div> <ul> <li v-for="item in list" :key="item">{{item}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return{list: []// searchText:' '// For computed: {<! -- Retrieve the searchKey from the Store -->searchKey() {
            this.$store.state.search.searchKey } } watch: { <! --> searchKey(val){this.searchText = val this.search()}} methods: {searchKey(val){this.searchText = val this.search()}}searchAxios.get (URL,this.searchText).then((res) => {this.list = res.list})}} </script>Copy the code


At this point, you can successfully perform a search in the search box of the navigation bar, and the search page will immediately display the latest content (even if there is no parent component between the two components), such as the navigation bar search for gold, and changes in the results list at the bottom