GambleAdmin/src/store/modules/breadcrumb.js

// TODO refactor better state mangement
const { localStorage } = window
const breadcrumb = {
  state: {
    visible: {
      firstLayer: true,
      secondLayer: false,
      thirdLayer: false,
      fourLayer: false
    },
    data: {
      firstLayer: JSON.parse(localStorage.getItem('data_1st')),
      secondLayer: JSON.parse(localStorage.getItem('data_2nd')),
      thirdLayer: JSON.parse(localStorage.getItem('data_3rd')),
      fourLayer: JSON.parse(localStorage.getItem('data_4th'))
    },
    query: {
      firstLayer: {
        limit: 20,
        page: 1,
        ...JSON.parse(localStorage.getItem('query_1st'))
      },
      secondLayer: {
        limit: 20,
        page: 1,
        ...JSON.parse(localStorage.getItem('query_2nd'))
      },
      thirdLayer: {
        limit: 20,
        page: 1,
        ...JSON.parse(localStorage.getItem('query_3rd'))
      },
      fourLayer: {
        limit: 20,
        page: 1,
        ...JSON.parse(localStorage.getItem('query_4th'))
      }
    }
  },
  mutations: {
    SET_VISIBLE: (state, layer) => {
      switch (layer) {
        case 1:
          state.visible = {
            firstLayer: true,
            secondLayer: false,
            thirdLayer: false,
            fourLayer: false
          }
          break
        case 2:
          state.visible = {
            firstLayer: false,
            secondLayer: true,
            thirdLayer: false,
            fourLayer: false
          }
          break
        case 3:
          state.visible = {
            firstLayer: false,
            secondLayer: false,
            thirdLayer: true,
            fourLayer: false
          }
          break
        case 4:
          state.visible = {
            firstLayer: false,
            secondLayer: false,
            thirdLayer: false,
            fourLayer: true
          }
          break
      }
    },
    SET_DATA: (state, option) => {
      switch (option.layer) {
        case 1:
          localStorage.setItem('data_1st', JSON.stringify(option.data))
          state.data.firstLayer = option.data
          break
        case 2:
          localStorage.setItem('data_2nd', JSON.stringify(option.data))
          state.data.secondLayer = option.data
          break
        case 3:
          localStorage.setItem('data_3rd', JSON.stringify(option.data))
          state.data.thirdLayer = option.data
          break
        case 4:
          localStorage.setItem('data_4th', JSON.stringify(option.data))
          state.data.fourLayer = option.data
          break
      }
    },
    SET_QUERY: (state, option) => {
      switch (option.layer) {
        case 1:
          localStorage.setItem('query_1st', JSON.stringify(option.query))
          state.query.firstLayer = { limit: 20, page: 1, ...option.query }
          break
        case 2:
          localStorage.setItem('query_2nd', JSON.stringify(option.query))
          state.query.secondLayer = { limit: 20, page: 1, ...option.query }
          break
        case 3:
          localStorage.setItem('query_3rd', JSON.stringify(option.query))
          state.query.thirdLayer = { limit: 20, page: 1, ...option.query }
          break
        case 4:
          localStorage.setItem('query_4th', JSON.stringify(option.query))
          state.query.fourLayer = { limit: 20, page: 1, ...option.query }
          break
      }
    }
  },

  actions: {
    SetVisible({ commit }, layer) {
      commit('SET_VISIBLE', layer)
    },
    SetData({ commit }, option) {
      commit('SET_DATA', option)
    },
    SetQuery({ commit }, option) {
      commit('SET_QUERY', option)
    }
  }
}

export default breadcrumb