由于小程序的内存非常宝贵，占用内存过大会非常卡顿，因此最好尽可能少的将数据放到内存中，即vuex存的数据要尽可能少。而小程序的storage支持单个 key允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
所以可以将一些相对取用不频繁的数据放进storage中，需要时再将这些数据放进内存，从而缓解内存的紧张，有点类似Windows中虚拟内存的概念。
2.storage换内存的实例
这个例子讲的会有点啰嗦，真正能用到的朋友可以详细看下。上面讲到playList数据量太多，播放一条音频时其实只需要最多保证3条数据在内存中即可，即上一首，播放中的，下一首,我们可以将多余的播放列表存放在storage中。
PS: 为了保证更平滑地连续切换下一首，我们可以稍微保存多几条，比如我这里选择保存5条数据在vuex中，播放时始终保证当前播放的音频前后都有两条数据。// 首次播放背景音频的方法 async function playAudio (audioId) { // 拿到播放列表，此时的playList最多只有5条数据。getPlayList方法看下面 const playList = await getPlayList(audioId) // 当前音频在vuex中的currentIndex const currentIndex = playList.findIndex(item => item.audioId === audioId) // 播放背景音频 this.audio = wx.getBackgroundAudioManager() this.audio.title = playList[currentIndex].title this.audio.src = playList[currentIndex].url // 通过mapActions将播放列表和currentIndex更新到vuex中 this.updateCurrentIndex(index) this.updatePlayList(playList) // updateCurrentIndex和updatePlayList是vuex写好的方法 } // 播放音频时获取播放列表的方法，将所有数据存在storage，然后返回当前音频的前后2条数据，保证最多5条数据 import { loadPlayList } from '@/api/audio' async function getPlayList (courseId, currentAudioId) { // 从api中请求得到播放列表 // loadPlayList是api的方法, courseId是获取列表的参数,表示当前课程下的播放列表 let rawList = await loadPlayList(courseId) // simplifyPlayList过滤掉一些字段 const list = this.simplifyPlayList(rawList) // 将列表存到storage中 wx.setStorage({ key: 'playList', data: list }) return subPlayList(list, currentAudioId) }
重点是subPlayList方法，这个方法保证了拿到的播放列表是最多5条数据。
function subPlayList(playList, currentAudioId) { let tempArr = [...playList] const count = 5 // 保持vuex中最多5条数据 const middle = parseInt(count / 2) // 中点的索引 const len = tempArr.length // 如果整个原始的播放列表本来就少于5条数据，说明不需要裁剪，直接返回 if (len <= count) { return tempArr } // 找到当前要播放的音频的所在位置 const index = tempArr.findIndex(item => item.audioId === currentAudioId) // 截取当前音频的前后两条数据 tempArr = tempArr.splice(Math.max(0, Math.min(len - count, index - middle)), count) return tempArr }
tempArr.splice(Math.max(0, index - middle), count)可能有些同学比较难理解，需要仔细琢磨一下。假设playList有10条数据：
当前音频是列表中的第1条（索引是0）,截取前5个：playList.splice(0, 5)，此时currentAudio在这5个数据的索引是0,没有上一首，有4个下一首
当前音频是列表中的第2条（索引是1）,截取前5个：playList.splice(0, 5)，此时currentAudio在这5个数据的索引是1，有1个上一首，3个下一首
当前音频是列表中的第3条（索引是2）,截取前5个：playList.splice(0, 5)，此时currentAudio在这5个数据的索引是2，有2个上一首，2个下一首
当前音频是列表中的第4条（索引是3）,截取第1到6个：playList.splice(1, 5)
，此时currentAudio在这5个数据的索引是2，有2个上一首，2个下一首
当前音频是列表中的第5条（索引是4），截取第2到7个：playList.splice(2, 5)，此时currentAudio在这5个数据的索引是2，有2个上一首，2个下一首
...
当前音频是列表中的第9条（索引是8），截取后5个：playList.splice(4, 5)，此时currentAudio在这5个数据的索引是3，有3个上一首，1个下一首
当前音频是列表中的最后1条（索引是9），截取后的5个：playList.splice(4, 5)，此时currentAudio在这5个数据的索引是4，有4个上一首，没有下一首
有点啰嗦，感兴趣的同学仔细琢磨下，无论当前音频在哪，都始终保证了拿到当前音频前后的最多5条数据。
接下来就是维护播放上一首或下一首时保证当前vuex中的playList始终是包含当前音频的前后2条。
播放下一首
function playNextAudio() { const nextIndex = this.currentIndex + 1 if (nextIndex < this.playList.length) { // 没有超出数组长度，说明在vuex的列表中，可以直接播放 this.audio = wx.getBackgroundAudioManager() this.audio.src = this.playList[nextIndex].url this.audio.title = this.playList[nextIndex].title this.updateCurrentIndex(nextIndex) // 当判断到已经到vuex的playList的边界了，重新从storage中拿数据补充到playList if (nextIndex === this.playList.length - 1 || nextIndex === 0) { // 拿到只有当前音频前后最多5条数据的列表 const newList = getPlayList(this.playList[nextIndex].courseId, this.playList[nextIndex].audioId) // 当前音频在这5条数据中的索引 const index = newList.findIndex(item => item.audioId === this.playList[nextIndex].audioId) // 更新到vuex this.updateCurrentIndex(index) this.updatePlayList(newList) } } }
这里的getPlayList方法是上面讲过的，本来是从api中直接获取的，为了避免每次都从api直接获取，所以需要改一下，先读storage，若无则从api获取：