vue慕课网音乐项目手记：48-搜索历史数据的处理

因为搜索关键词在多个模块都有使用，所以要在vuex里面去定义和修改。
state设置:

searchHistory: []

然后是mutation和types

[types.SET_SEARCH_HISTORY] (state, history) {
    // history接收一个数组
    state.searchHistort = history
  }

export const SET_SEARCH_HISTORY = 'SET_SEARCH_HISTORY'

然后是getters

export const searchHistory = state => state.searchHistory

然后在suggest里面点击的时候。会触发vuex状态的改变。
suggest组件在clickitem的时候。向外触发一个事件

this.$emit('select')

在父组件里面去监控这select方法，然后触发savesearch的事件

@search="saveSearch"

这里需要设置一个action，对mutation做一个封装。

export const saveSearchHistory = function ({commit}, query) {
  缓存localStorage
}

然而，这里还有一个需求，就是不止需要改变state的数据，还要同时去把数据存储到localStorage中/
这时候，需要去封装一个cache的js，里面写关于localstorage的一些逻辑。
这里借助了一个插件：good-storage来实现：

import storage from 'good-storage'

// 每一个存储都要定义个一个key
const SEARCH_KEY = '__search__'
const SEARCH_MAX_LENGTH = 15
// 最大值15

// 封装插入数组的方法
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 && maxLen < arr.length) {
    arr.pop()
  // 如果len大于最大值的话，就删除最后一个值
  }
}
// 操作和localStorage相关的一些逻辑
// 保存搜索结果
export function saveSearch (query) {
  // 接收一个query的参数,这个参数是当前要保存的query
  // 返回一个新数组
  let searches = storage.get(SEARCH_KEY, [])
  // 上面查看当前存储空间的情况，如果没有，就是一个空数组
  // 插入逻辑：最大15条，每条放前面，重复的数据把原来的删除
  insertArray(searches, query, (item) => {
    return item === query
    // searches里面的每一条和query比较
  }, SEARCH_MAX_LENGTH)
  storage.set(SEARCH_KEY, searches)
  // 在缓存里面保存searches
  return searches
  // 再吧这个searches返回出来，共vuex调用
}

然后就是在actions使用了。

export const saveSearchHistory = function ({commit}, query) {
  // 缓存localStorage
  commit(types.SET_SEARCH_HISTORY, saveSearch(query))
}

search里面调用actions

...mapActions([
      'saveSearchHistory'
    ])

saveSearch () {
      // 保存搜索结果
      // 在改变vuex的同时还要把数据存到本地缓存
      this.saveSearchHistory(this.query)
    }

vue慕课网音乐项目手记：48-搜索历史数据的处理

猜你喜欢