[TOC] #### 保存搜索历史  1. 用户在搜索框中搜索关键词，并点击搜索列表，跳转歌曲详情 2. vuex 设置 ~~~ import { loadSearch } from 'common/js/catch' export default { state: { // 搜索历史 loadSearch() 从缓存中读取搜索历史 historySearch: loadSearch() }, mutations: { 'SET_HISTORY'(state, historySearch) { state.historySearch = historySearch } } } ~~~ >[danger] loadSearch 本地缓存封装的函数，获取缓存中的搜索词 ***** 3.点击搜索列表，派发事件给父组件 ~~~ <ul> <li class="search-items" v-for="(item, index) in musicList" :key="index" @click="selectItem" > <div class="icon"><i class="icon-music"></i></div> <div class="text">{{item.albumname}}</div> </li> </ul> methods: { this.$emit('selectItem') } ~~~ 4. 父组件监听事件 ~~~ <!-- 搜索列表 --> <div class="music-list" v-show="query"> <search-list :query="query" @selectItem="onSelect"></search-list> </div> methods: { onSelect() { this.setHistory(this.query) }, ~~~ >[danger] query 为用户输入的搜索关键词 > this.setHistory 调用 vuex 中 setHistory 方法，传入用户搜索关键词 ***** 5. vuex actions ~~~ import { saveSearch } from 'common/js/catch' export default { // 搜索相关 setHistory({commit}, historySearch) { // 数据存入vux commit('SET_HISTORY', saveSearch(historySearch)) } } ~~~ catch 缓存文件 ~~~ // 引入 web-storage-cache 库 import Storage from 'web-storage-cache' // 实例化 Storage 对象 const localStorage = new Storage(); // 搜索历史key const SEARCH_KEY = '__search__'; // 搜索结果长度 const SEARCH_MAX_LENGTH = 15; /** * 缓存搜索历史 数组中保存最新搜索数据，超过长度则从数组末尾踢出 * @params query 搜索的词 */ export function saveSearch(query) { // 从缓存中获取数据 let searches = localStorage.get(SEARCH_KEY) ? localStorage.get(SEARCH_KEY) : [] // 数组排序 insertArray(searches, query, (item) => { return item === query }, SEARCH_MAX_LENGTH) // 存入缓存 localStorage.set(SEARCH_KEY, searches); return searches } /** * 读取缓存中的值 */ export function loadSearch() { return localStorage.get(SEARCH_KEY) ? localStorage.get(SEARCH_KEY) : [] } /** * 每次从数组中第一位插入，并删除重复数据 */ function insertArray (arr, val, compare, maxLen) { const index = arr.findIndex(compare) if (index === 0) { return } if (index > 0) { arr.splice(index, 1) } arr.unshift(val); if (maxLen && arr.length > maxLen) { arr.pop() } } ~~~