tengo un problema con las rutas, os comento mi problema brevemente, tengo un vuex con un modulo: user.js
Este vuex - user
tiene un action que es :
getUserBySlug({commit,getters},slug){
console.log('getUserBySlug');
console.log('slug => '+slug);
console.log('url get user by slug => '+getters.getHost+'user/'+slug );
axios.get(getters.getHost+'user/'+slug)
.then(
(response)=>{
console.log('response')
console.log(response)
commit('setUsers',response.data);
commit('setStatus',response.status);
}
)
.catch(
(error)=>{
console.log('error')
console.log(error)
// commit('setStatus',error.response.status);
}
)
}
Lo uso para que, en mi componente, UserList.vue cargue todos los usuarios:
<template>
<div>
<b-list-group>
<b-list-group-item v-for="(user,index) in getUsers" :key="user+index" :href="'/user/show/'+user.slug">{{user.name}}</b-list-group-item>
</b-list-group>
</div>
</template>
<script>
import axios from "axios";
import { mapGetters, mapMutations } from 'vuex'
export default {
name: 'UserList',
methods:{
loadUsers(){
console.log('Load Users !');
this.$store.dispatch('user/getAllUsers')
}
},
computed:{
...mapGetters('user',{
getUsers: 'getUsers',
getStatus: 'getStatus'
})
},
beforeMount() {
this.loadUsers();
}
}
</script>
Entonces antes de que se monte el componente (beforeMount
) carga la lista de usuarios desde el $store
.
Hasta aqui bien, pero si os fijais, esta lista tiene unos <a>
para pinchar en ellos e irte a una show de usuario.
Esta vista de UserShow.vue
es la siguiente:
<template>
<div>
<div class="container">
<div class="row">
<div class="col-12">
<h1>User Show</h1>
<div v-if="user!=null">
<div class="row d-flex justify-content-start">
<div class="col-5 w-100">
<a class="btn btn-sm btn-outline-info" :href="'/user/create/'+user.slug">Editar</a>
<a class="btn btn-sm btn-outline-danger" href="#" @click="deleteUser">Elimiar</a>
</div>
</div>
<hr>
<h4>{{user.name}}</h4>
<h4>{{user.email}}</h4>
<h4>{{user.created_at}}</h4>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.disabled_link{
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
</style>
<script>
import axios from "axios";
import {mapGetters, mapState} from "vuex";
import user from "@/store/modules/user";
export default {
name: 'UserCreate',
methods:{
loadUser(){
this.$store.dispatch('user/getUserBySlug',this.$route.params.slug);
},
deleteUser(){
console.log('delete user')
this.$store.dispatch('user/deleteUser',this.$route.params.slug);
if (this.getStatus === 200){
this.$router.push('/user/list');
}
}
},
computed: {
...mapState('user',{
user : state => state.users
}),
...mapGetters('user',{
getStatus:'getStatus'
})
},
mounted() {
this.loadUser();
}
}
</script>
Esa vista tiene un boton para borrar el usuario que tienes, cuando se le da llama a :
this.$store.dispatch('user/deleteUser',this.$route.params.slug);
, es muy simple, borra el usuario mediante su slug (funciona perfectamente).
Una vez borrado quiero q vuelva a ir a la vista de UserList.vue
para que el usuario siga haciendo lo que quiere. Aqui empieza el problema, yo hago el redirect con : this.$router.push('/user/list');
y me carga la lista de usuarios, pero sigue estando el usuario que he borrado, entonces si actualizo la pagina (F5
) carga otra vez la lista pero esta vez bien, sin el usuario que he borrado.
No se si el $route
trabaja con la cache y por eso me esta fastidiando. No se la verdad. ¿Como podria hacer que no tirara de cahce o forzarle a que haga la carga de usuarios siempre que entre en ese componente?