vue 实现搜索历史_vue项目搜索历史功能的实现

播放器项目中歌曲搜素页面的

首先需要在state定义搜索历史，在其中保存搜索历史

state.js:

// 搜索历史：

searchHistory: []

mutations中新增改变搜索历史的方法

mutations.js:

SET_SEARCH_HISTORY(state, history) {

state.searchHistory = history

}

在actions中需要提交一个状态改变history，由于需要存储到vuex中

export const saveSearchHistory = function ({

commit

}, query) {

commit('SET_SEARCH_HISTORY', saveSearch(query))

}

在utils中新建一个cache.js,用来存储localstroage.js,首先安装good-stroage作为存储缓存的依赖

cache.js:

import storage from 'good-storage';

定义一个key代表存储搜索历史：

const SEARCH_KEY = "__search__"

// 只缓存十五条数据

const SEARCH_MAX_LEN = 15

实现逻辑：

// arr总数组，val插入的数组，maxlen总条数

function insertArray(arr, val, maxLen) {

<