import Vue from 'vue' import Api from '@/api/index.js' 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 = { getDict: (state) => { return state.dict }, getDictByType: (state) => (type) => { /** * 闭包特性。返回一个函数,该函数接收一个type参数。 * 同时由于闭包还持有state对象,故可以返回需要的值。 */ return state.dict[type] }, // 缓存字典内容 dict ({ commit, state }, type) { // 判断是否已经缓存过,缓存过后将不再获取数据 const isExistence = state.queue.some((item) => { return item === 'dict/' + type }) // 没有缓存则请求数据 if (!isExistence) { // 在异步请求之前将该任务标记为已缓存(存入队列) commit('SET_QUEUE', 'dict/' + type) return new Promise((resolve, reject) => { return Api.getDict(type) .then((res) => { const { code, data } = res if (code && code !== 200) { // 获取失败移除缓存队列 commit('DEL_QUEUE', 'dict/' + type) reject(res) } else { // 获取到的值存入字典 commit('SET_DICT', { type: type, list: data }) resolve(res) } }) .catch((error) => { // 获取失败移除缓存队列 commit('DEL_QUEUE', 'dict/' + type) reject(error) }) }) } else { return state.dict[type] } } } export default { namespaced: true, state, mutations, actions }