vuex implementa el almacenamiento en caché

Este ejemplo toma la interfaz de búsqueda de música qq como ejemplo. El efecto logrado es: haga clic en los nombres de los cuatro cantantes en la imagen de arriba, y la lista de música correspondiente se mostrará en el marco derecho, pero si hace clic en la interfaz una vez, no se mostrará Solicite la interfaz y use la visualización de datos en el primer caché en vuex. En otras palabras, no importa cuántas veces haga clic, la cantidad máxima de veces que se solicita la interfaz es 4 veces.
El código se implementa de la siguiente manera:
1: api.js

export function getNewQqMusic(params) {
    
    
  return fetch({
    
    
    url: "/splcloud/fcgi-bin/smartbox_new.fcg",
    method: "GET",
    params,
  });
}

2: diseño de página y enlace de método

<div class="cache-content">
      <div class="title-content">
        <div
          v-for="item in songerName"
          :key="item.id"
          class="songer-name"
          @click="searchSong(item.name)"
        >
          {
   
   { item.name }}
        </div>
      </div>
      <div class="content">
        <div v-for="item in cacheMusicList[activeName]" :key="item.id">
          <span>{
   
   { item.name }}</span>
          <span>{
   
   { item.singer }}</span>
        </div>
      </div>
    </div>

3: estilo

.cache-content {
    
    
  width: 400px;
  height: 400px;
  background: red;
  display: flex;
}
.title-content {
    
    
  width: 60px;
  height: 400px;
  background: greenyellow;
}
.content {
    
    
  width: 340px;
  height: 400px;
  background: #ccc;
}
.songer-name {
    
    
  line-height: 42px;
  background: orange;
  text-align-last: justify;
}
.songer-name:nth-child(2n) {
    
    
  background: goldenrod;
}

4: Implementación del método

import {
    
     mapActions, mapState } from "vuex";
export default {
    
    
  name: "MusicList",
  data() {
    
    
    return {
    
    
      //   musicList: [],
      songerName: [
        {
    
     id: 1, name: "王菲" },
        {
    
     id: 2, name: "王力宏" },
        {
    
     id: 3, name: "小猫" },
        {
    
     id: 4, name: "王狗" },
      ],
      activeName: "",
    };
  },
  created() {
    
    
    console.log("this.$stroe", this.$store);
  },
  methods: {
    
    
    ...mapActions("music", ["getQqMusicInterface", "getCacheQqMusicInterface"]), // 接口
    // 点击名字搜索音乐
    searchSong(name) {
    
    
      //   console.log("name", name);
      let str =
        "_=1645232392501&cv=4747474&ct=24&format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=yqq.json&needNewCode=1&uin=1251271810&g_tk_new_20200303=2085573607&g_tk=2085573607&hostUin=0&is_xml=0&key=%E5%91%A8%E6%9D%B0";
      let params = {
    
    };
      str.split("&").map((ele) => {
    
    
        let arr = ele.split("=");
        params[arr[0]] = arr[1];
      });
      params.key = name;
      this.activeName = name;
      console.log("params", params);
      let lst = this.cacheMusicList[name];
      if (!(lst && lst.length > 0)) {
    
    
        this.getCacheQqMusicInterface(params);
      }
    },
  },
  computed: {
    
    
    ...mapState("music", ["musicList", "cacheMusicList"]),
  },
};

5：vuex：música.js

import {
    
     getNewQqMusic } from "@/utils/api";

export default {
    
    
  namespaced: true,
  state: {
    
    
    str: "hello world",
    musicList: [],
    cacheMusicList: {
    
    }, // 测试缓存的musiclist
  },
  getters: {
    
    },
  mutations: {
    
    
    updateMusicList(state, payload) {
    
    
      state.musicList = payload;
    },
    // 根据条件更新缓存music，有则用，无则更新
    updateCacheMusicList(state, payload) {
    
    
      state.cacheMusicList[payload.k] = payload.v;
      state.cacheMusicList=JSON.parse(JSON.stringify(state.cacheMusicList))
    },
  },
  actions: {
    
    
    getQqMusicInterface(store, payload) {
    
    
      getNewQqMusic(payload).then((res) => {
    
    
        // console.log('res store',res)
        store.commit("updateMusicList", res.data.data.song.itemlist);
      });
    },
    // 测试缓存
    getCacheQqMusicInterface(store, params) {
    
    
      getNewQqMusic(params).then((res) => {
    
    
        // console.log("payload", payload, "rs", res);
        let payload = {
    
     k: params.key, v: res.data.data.song.itemlist };
        store.commit("updateCacheMusicList", payload);
      });
    },
  },
};

El efecto final es el siguiente:

no importa cuántas veces se haga el último clic, la interfaz siempre se ajusta cuatro veces como máximo.