cache.js

import Vue from 'vue'
import api from '@/api'

const state = {
  dict: {},
  queue: []
}
const mutations = {
  SET_DICT: (state, { type, list }) => {
    // 设置值：注意得用Vue.set方法
    Vue.set(state.dict, type, list)
  },
  SET_QUEUE: (state, type) => {
    state.queue.push(type)
  },
  DEL_QUEUE: (state, type) => {
    // 找到并删除
    for (let i = 0; i < state.queue.length; i++) {
      const item = state.queue[i]
      if (item === type) {
        state.queue.splice(i, 1)
        break
      }
    }
  }
}
const actions = {
  async getDictByType ({ dispatch, state }, type) {
    /**
     * 闭包特性。返回一个函数，该函数接收一个type参数。
     * 同时由于闭包还持有state对象，故可以返回需要的值。
     */
    await dispatch('dict', type)
    var obj = JSON.parse(JSON.stringify(state.dict[type]))
    return obj
  },
  // 缓存字典内容
  dict ({ commit, state }, type) {
    // 判断是否已经缓存过，缓存过后将不再获取数据
    const isExistence = state.queue.some((item) => {
      return item === 'dict/' + type
    })
    // 没有缓存则请求数据
    if (!isExistence) {
      // 在异步请求之前将该任务标记为已缓存（存入队列）
      this.commit('cache/SET_QUEUE', 'dict/' + type)
      return new Promise(async (resolve, reject) => {
        await api.parameter.getArrayListByType({ typeId: type })
          .then(({ data = {} }) => {
            if (data) {
              try {
                this.commit('cache/SET_DICT', { type: type, list: data })
                resolve(data)
              } catch (error) {
                reject(error)
              }
            } else {
              reject('error')
            }
          }).catch(err => {
            // 获取失败移除缓存队列
            this.commit('cache/DEL_QUEUE', 'dict/' + type)
            reject(err.response)
          })
      })
    } else {
      return state.dict[type]
    }
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}