[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() } } ~~~