import Vue from 'vue'

export default {
  namespaced: true,
  state: {
    caches: []
  },
  actions: {
    // 添加缓存的路由组件
    addCache ({ state, dispatch }, componentName) {
      if (Array.isArray(componentName)) {
        componentName.forEach((item) => {
          dispatch('addCache', item)
        })
        return
      }
      
      const { caches } = state
      if (!componentName || caches.includes(componentName)) return

      caches.push(componentName)
      console.log('缓存路由组件：', componentName)
    },

    // 移除缓存的路由组件
    removeCache ({ state, dispatch }, componentName) {
      if (Array.isArray(componentName)) {
        componentName.forEach((item) => {
          dispatch('removeCache', item)
        })
        return
      }
      
      const { caches } = state
      const index = caches.indexOf(componentName)
      console.log(index);
      if (index > -1) {
        console.log('清除缓存的路由组件：', componentName)
        return caches.splice(index, 1)[0]
      }
    },
    // 移除缓存的路由组件的实例
    async removeCacheEntry ({ dispatch }, componentName) {
      const cacheRemoved = await dispatch('removeCache', componentName)
      if (cacheRemoved) {
        await Vue.nextTick()
        dispatch('addCache', componentName)
      }
    },
    // 清除缓存的路由组件的实例
    clearEntry ({ state, dispatch }) {
      const { caches } = state
      caches.slice().forEach(key => {
        dispatch('removeCacheEntry', key)
      })
    }
  }
}