Pseudo routing con migas y dispatch en vez de href

resources/js/components/pedidos/NavMigas.vue

@@ -3,7 +3,7 @@
          aria-label="breadcrumbs" v-show="visible">
         <ul class="mt-4">
             <li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i === migaActiva}">
-                <a :href="miga.href" v-text="miga.nombre"
+                <a @click="clickMiga({ miga: miga })" v-text="miga.nombre"
                    :class="{'has-text-danger': i !== migaActiva}"></a>
             </li>
         </ul>
@@ -11,11 +11,15 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from "vuex";
+import { mapActions, mapGetters, mapState } from "vuex";
 
 export default {
+    methods: {
+        ...mapActions('productos',["getProductos"]),
+        ...mapActions('ui',["clickMiga"]),
+    },
     computed: {
-        ...mapState('ui',["migas","miga_inicial"]),
+        ...mapState('ui',["migas"]),
         ...mapGetters('pedido',["pedidoDefinido"]),
         visible() {
             return this.migas.length > 0

resources/js/store/modules/ui.js

@@ -1,8 +1,10 @@
+import { dropWhile } from "lodash/array";
+
 const state = {
     show_chismosa: false,
     show_devoluciones: false,
-    miga_inicial: { nombre: 'Categorias', href: '/pedido' },
-    migas: [{ nombre: 'Categorias', href: '/pedido' }],
+    miga_inicial: { nombre: 'Categorias', action: 'productos/getProductos' },
+    migas: [{ nombre: 'Categorias', action: 'productos/getProductos' }],
 };
 
 const mutations = {
@@ -14,6 +16,13 @@ const mutations = {
     },
     addMiga(state, miga) {
         state.migas.push(miga);
+    },
+};
+
+const actions = {
+    clickMiga({ dispatch }, { miga }) {
+        dispatch(miga.action, null, { root: true });
+        state.migas = dropWhile(state.migas.reverse(),(m => m.nombre !== miga.nombre)).reverse();
     }
 };
 
@@ -21,4 +30,5 @@ export default {
     namespaced: true,
     state,
     mutations,
+    actions,
 };