单个组件中写法

<template>
  <section id="search">
    <v-search :searchSettings="searchSettings" @search="carInfoSearch" @reset="resetSearch"></v-search>
  </section>
</template>
<script>
import vSearch from "@/components/search/vSearch";
import { searchSettings } from "./data";
import { insertArray } from '@/config/search-history'
import { SEARCH_MAX_LEN } from '@/config/page-config'
import storage from 'good-storage'
const STATUS_KEY = '_status_' //车辆状态
export default {
  name: "carStatusSearch",
  data() {
    return {
      searchSettings: searchSettings,
      searchData: '',
       statusHistory: storage.get(STATUS_KEY, []) // 获取搜索记录  默认值为空
      
    };
  },
  mounted() {
    this.$nextTick(() => {
       this.searchSettings[0].data = this.statusHistory
   
    })
  },
  methods: {

    carInfoSearch(searchObj) {
       console.log(searchObj,'======提交的数据=======')
      let searchKey={
        "value":searchObj.keyWords  
       }
       if(searchObj.keyWords){
          this.saveHistory(searchKey)
       }
      this.loading = true;
      if (searchObj) {
        searchObj.city ? (searchObj.cityId = searchObj.city[1]) : (searchObj.cityId = null);
        delete searchObj.city;
        this.$emit('handleSearchData', searchObj)
      }
    },
       // 存储并返回新的搜索数据
    saveHistory(query) {
      let searches = storage.get(STATUS_KEY, [])   //默认为空数组
      // 处理数据
      insertArray(searches, query, item => { return item.value === query.value }, SEARCH_MAX_LEN)
      storage.set(STATUS_KEY, searches)
        this.searchSettings[0].data = searches
    },
    resetSearch() {
      this.loading = true;
      this.$emit('handleReset')
    }
  },
  components: {
    vSearch
  }
};
</script>
<style lang="scss">

</style>

引入

// arr 存储的数组 val  存的值 compare 比较函数maxLen 最大值
export function insertArray(arr, val, compare, maxLen) {
    // findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
    // 先查找这个数组中书否有这个值
    const index = arr.findIndex(compare)
        // 如果是在第一位 什么都不做
    if (index === 0) {
        return
    }

    // 如果这个值不是第一位  也就是有这个值 删除它
    if (index > 0) {
        arr.splice(index, 1)
    }
    console.log(index, "========位置==========")
        // 然后把这个值添加到第一位
    arr.unshift(val)
    if (maxLen && arr.length > maxLen) {
        // 删除数组中的最后一个元素
        arr.pop()
    }
}

vuex写法

import storage from 'good-storage'
const SEARCH_MAX_LEN = 5
const STATUS_KEY = '_status_' //车辆状态
const ALARM_KEY = '_alarm_' //车辆报警
const OFFILINE_RECORD_KEY = '_offiline_record_' //离线上线记录
const START_RECORD_KEY = '_start_record_' //点火熄火记录
const ACTION_RECORD_KEY = '_action_record_' //控制日志
const INFO_KEY = '_info_' //车辆信息
const MODEL_KEY = '_model_' //车型管理

const state = {
    statusHistory: storage.get(STATUS_KEY, []),
    alarmHistory: storage.get(ALARM_KEY, []),
    offilineRecordHistory: storage.get(OFFILINE_RECORD_KEY, []),
    startHistory: storage.get(START_RECORD_KEY, []),
    actionHistory: storage.get(ACTION_RECORD_KEY, []),
    infoHistory: storage.get(INFO_KEY, []),
    modelHistory: storage.get(MODEL_KEY, [])
}

const getters = {
    statusHistory(state) {
        return state.statusHistory
    },
    alarmHistory(state) {
        return state.alarmHistory
    },
    offilineRecordHistory(state) {
        return state.offilineRecordHistory
    },
    startHistory(state) {
        return state.startHistory
    },
    actionHistory(state) {
        return state.actionHistory
    },
    infoHistory(state) {
        return state.infoHistory
    },
    modelHistory(state) {
        return state.modelHistory
    },
}
const mutations = {
    statusHistory(state, history) {
        state.statusHistory = history
    },
    alarmHistory(state, history) {
        state.alarmHistory = history
    },
    offilineRecordHistory(state, history) {
        state.offilineRecordHistory = history
    },
    startHistory(state, history) {
        state.startHistory = history
    },
    actionHistory(state, history) {
        state.actionHistory = history
    },
    infoHistory(state, history) {
        state.infoHistory = history
    },
    modelHistory(state, history) {
        state.modelHistory = history
    },
}
const actions = {
    statusSaveHistory({ commit }, query) {
        commit('statusHistory', statusSearch(query))
    },
    alarmSaveHistory({ commit }, query) {
        commit('alarmHistory', alarmSaveSearch(query))
    },
    offilineRecordSaveHistory({ commit }, query) {
        commit('offilineRecordHistory', saveSearch(query))
    },
    startSaveHistory({ commit }, query) {
        commit('startHistory', startSearch(query))
    },
    actionSaveHistory({ commit }, query) {
        commit('actionHistory', saveSearch(query))
    },
    infoSaveHistory({ commit }, query) {
        commit('infoHistory', saveSearch(query))
    },
    modelSaveHistory({ commit }, query) {
        commit('modelHistory', saveSearch(query))
    }
}

function statusSearch(query) {
    let searches = storage.get(STATUS_KEY, [])
    insertArray(searches, query, (item) => {
        return item.value === query.value
    }, SEARCH_MAX_LEN)
    storage.set(STATUS_KEY, searches)
    return searches
}

function alarmSaveSearch(query) {
    let searches = storage.get(ALARM_KEY, [])
    insertArray(searches, query, (item) => {
        return item.value === query.value
    }, SEARCH_MAX_LEN)
    storage.set(ALARM_KEY, searches)
    return searches
}

function startSearch(query) {
    let searches = storage.get(START_RECORD_KEY, [])
    insertArray(searches, query, (item) => {
        return item.value === query.value
    }, SEARCH_MAX_LEN)
    storage.set(START_RECORD_KEY, searches)
    return searches
}

// arr 存储的数组 val  存的值 compare 比较函数maxLen 最大值
function insertArray(arr, val, compare, maxLen) {
    // findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
    // 先查找这个数组中书否有这个值
    const index = arr.findIndex(compare)
        // 如果是在第一位 什么都不做
    if (index === 0) {
        return
    }

    // 如果这个值不是第一位  也就是有这个值 删除它
    if (index > 0) {
        arr.splice(index, 1)
    }
    console.log(index, "========位置==========")
        // 然后把这个值添加到第一位
    arr.unshift(val)
    if (maxLen && arr.length > maxLen) {
        // 删除数组中的最后一个元素
        arr.pop()
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}