因为搜索关键词在多个模块都有使用,所以要在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来实现:
https://blog.csdn.net/u013079459/article/details/78125623
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)
}