vuex缓存接口返回的数据，只在首次使用调用接口，之后使用vuex中的缓存值-Toy模板网

这篇具有很好参考价值的文章主要介绍了vuex缓存接口返回的数据，只在首次使用调用接口，之后使用vuex中的缓存值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

场景：同一个接口在多个页面调用
问题：重复访问，导致对服务器的重复请求，降低用户体验。
解决：使用vuex的异步处理，第一次访问时将数据缓存，下次访问直接从缓冲中获取，提高访问速度
注意：刷新页面时，会把当前页面占用的缓存释放掉，再重新加载新的缓存，如果想要刷新不重新加载，需要做vuex持久化缓存处理

store/index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import { getDynamicData } from "@/APIs/flowSegmentation";

const state = {
  professionList: null,
};

const getters = {
  professionList: (state) => {
    if (!state.professionList) {
      Store.dispatch("getprofessionList");
    }
    return state.professionList;
  },
};

const mutations = {
  SET_PROFESSION_LIST: (state, data) => {
    state.professionList = data;
  },
};

const actions = {
  async getprofessionList({ commit }) {
    const res = await getDynamicData("flow_segmentation");
    commit("SET_PROFESSION_LIST", res.data);
  },
};

const modules = {};
const Store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules,
});
export default Store;

使用文章来源地址https://www.toymoban.com/news/detail-532098.html

  computed: {
    ...mapGetters([
      "professionList",
    ]),
  },
  1.首次访问调用state中getters的professionList方法
  2.此时state中professionList为null，则调用action中getprofessionList方法来获取数据
  3.再把获取后的数据在getters返回给计算属性
  4.当后续再次使用的时候由于已有数据，则直接返回不需要再次调用接口