修改搜索历史记录

src/components/SearchHistory.vue

@@ -22,11 +22,12 @@ export default {
     stateKey: String,
   },
   computed: {
-    ...mapState('search', [this.stateKey]),
+    ...mapState('search', {
+      historys (state) {
+        return state[this.stateKey] || []
+      }
+    }),
 
-    historys () {
-      return this[this.stateKey] || []
-    }
   },
   methods: {
     jumItem (val) {

src/router/modules/home.js

@@ -6,7 +6,7 @@ const Routers = [
             title: '全局搜索',
             isLogin: false
         },
-        component: () => import(/* webpackChunkName: "GlobalSearch" */ '@/views/home/search.vue') // 全局搜索
+        component: () => import(/* webpackChunkName: "GlobalSearch" */ '@/views/homeSearch/index.vue') // 全局搜索
     },
     {
         path: '/home/search/result',
@@ -15,7 +15,7 @@ const Routers = [
             title: '全局搜索',
             isLogin: false
         },
-        component: () => import(/* webpackChunkName: "GlobalSearchResult" */ '@/views/home/search.vue') // 全局搜索
+        component: () => import(/* webpackChunkName: "GlobalSearchResult" */ '@/views/homeSearch/result.vue') // 全局搜索
     },
 ]
 

src/store/modules/search.js

 
+const Types = {
+    Home: { size: 10 }
+}
+
 
 export default {
     namespaced: true,
@@ -6,9 +10,14 @@ export default {
         Home: []
     },
     mutations: {
-        MSetHomeSearch (state, datas) {
+        MSetHistoryDatas (state, { key, datas }) {
+            state[key] = datas
+        },
+
+        MSetHomeHistory (state, datas) {
             state.Home = datas
         },
+
         MCleanHistory (state, stateKey) {
             state[stateKey] = []
         }
@@ -16,8 +25,34 @@ export default {
     actions: {
         ACleanHistory ({ commit }, stateKey) {
             commit('MCleanHistory', stateKey)
+        },
+
+        APushSearchValue ({ state, commit }, param = {}) {
+            const { stateKey, value } = param
+            if (Object.hasOwnProperty.call(Types, stateKey)) {
+                const newDatas = pushSearchValue(state[stateKey], value, Types[stateKey].size)
+                commit('MSetHistoryDatas', { key: stateKey, value: newDatas })
+            }
+        },
+        
+        APushHomeSearchValue ({ state, commit }, val) {
+            const newDatas = pushSearchValue(state.Home, val, Types.Home.size)
+            commit('MSetHomeHistory', newDatas)
         }
     },
     modules: {
     }
 }
+
+
+function pushSearchValue (datas, value, size) {
+    const newDatas = [...datas]
+    newDatas.unshift(value)
+    if (newDatas.length > size) {
+        newDatas.pop()
+    }
+    return newDatas
+}
+
+
+

src/views/home/search.vue

-<template>
-  <div class="global-search nafmii-head-bg3">
-    <nafm-header navClass="nafmii-head-bg3">
-      <SearchInput class="search-input" v-model="keyword" :placeholder="$t('home.searchPlaceholder')" @search="handleSearch" />
-    </nafm-header>
-    <main>
-      <!-- <div class="search-history-title">
-        <span>搜索历史</span>
-        <div class="clear">
-          <img src="@/assets/icon/trash.png" alt="">
-        </div>
-      </div>
-      <div class="search-history-values">
-      </div> -->
-    </main>
-  </div>
-</template>
-
-<script>
-import SearchInput from '@/components/SearchInput'
-export default {
-  name: 'GlobalSearch',
-  components: { SearchInput },
-  data () {
-    return {
-      keyword: null
-    }
-  },
-  methods: {
-    handleSearch (val) {
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.global-search {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .search-input {
-    width: 100%;
-    padding-left: 40px;
-  }
-  main {
-    background: #fafafa;
-    height: 100%;
-    padding: 20px 15px;
-    .search-history-title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      span {
-        color: #333333;
-        font-size: 12px;
-      }
-      .clear {
-        width: 25px;
-        height: 25px;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .search-history-values {
-      padding-top: 5px;
-      display: flex;
-      flex-wrap: wrap;
-
-      span {
-        background: white;
-        line-height: 30px;
-        font-size: 12px;
-        padding: 0 15px;
-        border-radius: 15px;
-        color: #161818;
-        margin-right: 10px;
-        margin-bottom: 10px;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file

src/views/homeSearch/components/SearchDataLayout.vue

+<template>
+  <section></section>
+</template>
+
+<script>
+export default {
+  name: 'SearchDataLayout',
+  props: {
+
+  },
+  data () {
+
+    return {}
+  },
+  methods: {
+
+  }
+}
+</script>
\ No newline at end of file

src/views/homeSearch/components/SearchLayout.vue

+<template>
+  <div class="search-layout nafmii-head-bg3">
+    <nafm-header navClass="nafmii-head-bg3">
+      <SearchInput class="search-input" v-model="keyword" :placeholder="$t('home.searchPlaceholder')" @search="handleSearch" />
+    </nafm-header>
+    <div class="history-container" v-if="history">
+      <SearchHistory stateKey="Home" />
+    </div>
+    <SearchDataLayout v-else />
+  </div>
+</template>
+<script>
+import SearchInput from '@/components/SearchInput'
+import SearchHistory from '@/components/SearchHistory'
+import SearchDataLayout from './SearchDataLayout'
+export default {
+  name: 'HomeSearch',
+  components: { SearchInput, SearchHistory, SearchDataLayout },
+  props: {
+    history: Boolean,
+    defKeyword: String
+  },
+  data () {
+    return {
+      keyword: this.defKeyword,
+    }
+  },
+  methods: {
+    handleSearch (val) {
+      this.$store.dispatch('search/APushHomeSearchValue', val)
+      this.$emit('search', val)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.search-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .search-input {
+    width: 100%;
+    padding-left: 40px;
+  }
+  .history-container {
+    flex: 1;
+  }
+}
+</style>
\ No newline at end of file

src/views/homeSearch/index.vue

+<template>
+  <div class="global-search">
+    <SearchLayout :history="true" @seach="handleSearch" />
+  </div>
+</template>
+
+<script>
+import SearchLayout from './components/SearchLayout'
+export default {
+  name: 'HomeSearch',
+  components: { SearchLayout },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    handleSearch (val) {
+    //   this.$router.push({ name: '', query: { keyword: val } })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.global-search {
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/views/homeSearch/result.vue

+<template>
+  <div class="home-search">
+    <SearchLayout :history="false" :defKeyword="keyword" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HomeSearchResult',
+  data () {
+    return {
+      keyword: null
+    }
+  }
+}
+</script>
\ No newline at end of file