Vue 全局缓存 字典缓存 节流

前言

在后台管理系统中基本上都会有字典之类的操作。这类操作有一个共性：相同接口、不同参数返回不同的目标数据、数据结构一致。使用上无非是一些下拉选项、多选、状态翻译等。

有一个很实际的问题，A页面中存在某个下拉B页面也存在，一般的做法是两次请求，分别获取数据。但是当项目中字典数据应用越来越多的时候，大量重复的请求无法避免，造成资源浪费。

一般来说有两个解决办法：

1.随着项目启动将所有需要获取的数据获取一遍，缓存起来，用的时候直接取。优点是直观，方便管理。缺点是启动时的网络压力很大，用户可能不会点开很多页面，一定程度上资源浪费。

2.当需要的时候进行缓存，再次使用的时候直接取数据，不用再次请求。优点是灵活，按需就取。缺点是，依赖发布订阅模式（Vue中双向绑定），每次都需确认调用。

今天要说的是方法2的一种实现。

实现

直接上干货

import Vue from 'vue'
import Api from '@/api/index.js'
const cache = {
  namespaced: true,
  state: {
    dict: {},
    queue: []
  },
  mutations: {
    SET_DICT: (state, { type, list }) => {
      // 设置值：注意得用Vue.set方法
      Vue.set(state.dict, type, list)
    },
    SET_QUEUE: (state, type