修改搜索历史记录

src/components/SearchHistory.vue

 <template>
 <template>
   <div class="history">
   <div class="history">
-    <div class="history_title" v-if="list.length">
+    <div class="history_title" v-if="historys.length">
       <span>搜索历史</span>
       <span>搜索历史</span>
       <img :src="require('@/assets/icon/trash.png')" @click="handleClear">
       <img :src="require('@/assets/icon/trash.png')" @click="handleClear">
     </div>
     </div>
-    <div class="historyList" v-if="list.length">
+    <div class="historyList" v-if="historys.length">
       <ul>
       <ul>
-        <li v-for="(item,index) in list" :key="index" @jump="jumItem(item)">{{item}}</li>
+        <li v-for="(item,index) in historys" :key="index" @jump="jumItem(item)">{{item}}</li>
       </ul>
       </ul>
     </div>
     </div>
     <div class="noData" v-else>
     <div class="noData" v-else>
@@ -15,19 +15,25 @@
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
+import { mapState } from 'vuex'
 export default {
 export default {
   name: 'SearchHistory',
   name: 'SearchHistory',
   props: {
   props: {
-    list: {
-      type: Array,
-      default: () => []
+    stateKey: String,
+  },
+  computed: {
+    ...mapState('search', [this.stateKey]),
+
+    historys () {
+      return this[this.stateKey] || []
     }
     }
   },
   },
   methods: {
   methods: {
-    jumItem(val) {
+    jumItem (val) {
       this.$emit('jumpPage', val)
       this.$emit('jumpPage', val)
     },
     },
-    handleClear() {
+    handleClear () {
+      this.$store.dispatch('search/ACleanHistory', this.stateKey)
       this.$emit('clear')
       this.$emit('clear')
     }
     }
   }
   }

src/store/modules/search.js

+
+
+export default {
+    namespaced: true,
+    state: {
+        Home: []
+    },
+    mutations: {
+        MSetHomeSearch (state, datas) {
+            state.Home = datas
+        },
+        MCleanHistory (state, stateKey) {
+            state[stateKey] = []
+        }
+    },
+    actions: {
+        ACleanHistory ({ commit }, stateKey) {
+            commit('MCleanHistory', stateKey)
+        }
+    },
+    modules: {
+    }
+}

src/views/home/search.vue

@@ -4,20 +4,14 @@
       <SearchInput class="search-input" v-model="keyword" :placeholder="$t('home.searchPlaceholder')" @search="handleSearch" />
       <SearchInput class="search-input" v-model="keyword" :placeholder="$t('home.searchPlaceholder')" @search="handleSearch" />
     </nafm-header>
     </nafm-header>
     <main>
     <main>
-      <div class="search-history-title">
+      <!-- <div class="search-history-title">
         <span>搜索历史</span>
         <span>搜索历史</span>
         <div class="clear">
         <div class="clear">
-          <img src="" alt="">
+          <img src="@/assets/icon/trash.png" alt="">
         </div>
         </div>
       </div>
       </div>
       <div class="search-history-values">
       <div class="search-history-values">
-        <span>ksdj离开</span>
-        <span>ksdj离开</span>
-        <span>ksdj离开水电费会计师</span>
-        <span>ksdj离开水电费会计师</span>
-        <span>水电费会计师</span>
-        <span>电费会计师</span>
-      </div>
+      </div> -->
     </main>
     </main>
   </div>
   </div>
 </template>
 </template>
@@ -63,7 +57,10 @@ export default {
       .clear {
       .clear {
         width: 25px;
         width: 25px;
         height: 25px;
         height: 25px;
-        background: white;
+        img {
+          width: 100%;
+          height: 100%;
+        }
       }
       }
     }
     }
     .search-history-values {
     .search-history-values {