vuex persistent

src/store/getters.js

   avatar: state => state.user.avatar,
   username: state => state.user.username,
   roles: state => state.user.roles,
-  visible: state => state.breadcrumb.visible
+  visible: state => state.breadcrumb.visible,
+  data: state => state.breadcrumb.data
 }
 export default getters

src/store/modules/breadcrumb.js

 // TODO refactor better state mangement
+const { localStorage } = window
 const breadcrumb = {
   state: {
     visible: {
       secondLayer: false,
       thirdLayer: false,
       fourLayer: false
+    },
+    data: {
+      firstLayer: JSON.parse(localStorage.getItem('firstLayer')),
+      secondLayer: JSON.parse(localStorage.getItem('secondLayer')),
+      thirdLayer: JSON.parse(localStorage.getItem('thirdLayer')),
+      fourLayer: JSON.parse(localStorage.getItem('fourLayer'))
     }
   },
   mutations: {
-    SET_VISIBLE: (state, visible) => {
-      switch (visible) {
+    SET_VISIBLE: (state, layer) => {
+      switch (layer) {
         case 1:
           state.visible = {
             firstLayer: true,
           }
           break
       }
+    },
+    SET_DATA: (state, option) => {
+      switch (option.layer) {
+        case 1:
+          localStorage.setItem('firstLayer', JSON.stringify(option.data))
+          break
+        case 2:
+          localStorage.setItem('secondLayer', JSON.stringify(option.data))
+          break
+        case 3:
+          localStorage.setItem('thirdLayer', JSON.stringify(option.data))
+          break
+        case 4:
+          localStorage.setItem('fourLayer', JSON.stringify(option.data))
+          break
+      }
     }
   },
   actions: {
-    SetVisible({ commit }, visible) {
-      commit('SET_VISIBLE', visible)
+    SetVisible({ commit }, layer) {
+      commit('SET_VISIBLE', layer)
+    },
+    SetData({ commit }, option) {
+      commit('SET_DATA', option)
     }
   }
 }