收藏功能:
一、本地存储代码,array-storage.js:
import storage from 'good-storage'
function insertArray(arr, val, compare) {
const index = arr.findIndex(compare)
if (index > -1) {
// index>-1说明val在arr中存在
return
}
arr.unshift(val)
// 插入到数组的前面
}
export function save(item, key, compare) {
const items = storage.get(key, [])
// 这行代码的作用是尝试从存储中获取与给定 key 相关的数据。如果成功获取数据,它将存储在 items 变量中;如果无法获取数据,或者 key 不存在,那么将使用默认值,即一个空数组。最终,items 变量中将包含从存储中获取的数据或空数组。
insertArray(items, item, compare)
// items、item 和 compare。它的作用是向数组 items 中插入一个新的元素 item,并使用比较函数 compare 来确定插入的位置。
// 在内部定义compare函数,但compare函数的内部细节由外部去定义即可,
return items
}
二、在constant.js定义key并导出:
export const FAVORITE_KEY = '__favorite__'
三、将钩子函数实现收藏功能相关逻辑封装到use-favorite.js中:
主要代码:
function toggleFavorite(song) {
let list
if (!isFavorite(song)) {
// remove
} else {
list = save(song, FAVORITE_KEY)
}
song.commit('setFavoriteList', list, compare)
function compare(item) {
return item.id === song.id
}
}