[JavaScript知识库]vuex页面实现多个页面跳转间的缓存

样例描述：
现在有一个主页面叫home，有另一个页面叫音乐列表页面(qq-music)，剩下一个页面叫音乐详情页面(qq-music-detail)，
现在要用vuex实现从home页面到音乐列表页面时，再从音乐列表到音乐详情页面。
1.如果是从音乐详情页面返回音乐列表页面，则要把上次进入音乐列表页面的数据展示出来。
2.如果是从首页进入音乐列表页面，则重新请求，不加载缓存数据
如何用 vuex缓存数据在上一篇文章

在已实现缓存的基础上，现在要解决的就是当从home页面进入音乐列表页面时如何清空缓存数据，如何不清的话，不管从哪个页面进入，缓存数据会一直都在。
这时主要用到一个路由函数beforeRouteEnter，同时路由配置时要加上meta标签，以便区分是从前一个页面进入还是从后一个页面返回。
路由配置如下：

    {
        id: 1113,
        meta: {
          title: "0219",
          isBack: false,
        },
        path: "/0219",
        component: QqMusic,
      },

beforeRouteEnter函数使用如下：

  // 如果是从音乐详情页面过来的话，就把目标页面的isBack改为true
  beforeRouteEnter(to, from, next) {
    if (from.name === "QqMusicDetail") {
      to.meta.isBack = true;
    }
    next();
  },

created里面清空数据如下：

// 取反可以判断出页面是否需要缓存
    if (!this.$route.meta.isBack) {
      // 清空缓存的数据
      this.updateActiveName(null);
      this.updateCacheMusicList(null);
    }
    this.$route.meta.isBack = false; // 状态再进行重置

vuex–>music.js代码如下：主要是改变state里面缓存的数据的状态变化

state:{
	cacheMusicList: {}, // 测试缓存的musiclist
    activeName: "", // 当前选中的歌手名字
},
mutations:{
    // 根据条件更新缓存music，有则用，无则更新
    updateCacheMusicList(state, payload) {
      if (payload !== null) {
        state.cacheMusicList[payload?.k] = payload?.v;
        state.cacheMusicList = JSON.parse(JSON.stringify(state.cacheMusicList));
      } else {
        state.cacheMusicList = {};
      }
    },
    // 更新当前选中的name
    updateActiveName(state, payload) {
      state.activeName = payload;
    },
}