Comparte:
History back
Tengo un proyecto con Inertia, realmente me pasó ya lo mismo con Laravel+VueRouter con la opción de volver a una url anterior con el botón del navegador, de esta forma no refresca la página, el problema es este:
Tenemos una lista de usuarios, user.index
Accedemos al usuario para editar: user.edit{1}
Modificamos el registro: user.update
volvemos con back del navegador, history.back(), con cualquiera de estas opciones no refresca la lista de user.index y no vemos lo cambios.
Solución, creo un sistema con VUEX para volver a la última visita y así si refresca:
Tenemos una lista de usuarios, user.index
Accedemos al usuario para editar: user.edit{1}
Modificamos el registro: user.update
volvemos con back del navegador, history.back(), con cualquiera de estas opciones no refresca la lista de user.index y no vemos lo cambios.
Solución, creo un sistema con VUEX para volver a la última visita y así si refresca:
const store = createStore({
state() {
return {
history: ["/"],
};
},
getters: {
getHistory(state) {
return state.history.length == 1
? state.history[0]
: state.history[state.history.length - 1];
},
},
mutations: {
reset(state) {
state.history = ["/"];
},
increment(state, url) {
state.history.push(url);
},
decrease(state) {
if (state.history.length > 1) state.history.pop();
},
},
actions: {
historyReset(context) {
context.commit("reset");
},
historyIncrement(context, url) {
context.commit("increment", url);
},
historyBack(context) {
context.commit("decrease");
},
},
});
ahora en los componentes basta con registrar la ruta, yo lo hago en el mounted() del componente:
this.historyIncrement(window.location.pathname);
this.historyIncrement(window.location.pathname);
y crear el método back de esta manera:
back() {
this.historyBack();
this.$inertia.get(this.getHistory);
},
Funcionar, funciona... la cuestión es, ¿a alguien se le ocurre algo mejor?
Saludos!