Skip to main content
se añadieron 5 caracteres en el cuerpo
Origen Enlace
josanangel
  • 2.4k
  • 1
  • 24
  • 66

Hasta aqui bien, pero si os fijais, esta lista tiene unos <a>:href="" para pinchar en ellos e irte a una show de usuario. Esta vista de UserShow.vue es la siguiente:

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:

Hasta aqui bien, pero si os fijais, esta lista tiene unos :href="" para pinchar en ellos e irte a una show de usuario. Esta vista de UserShow.vue es la siguiente:

Origen Enlace
josanangel
  • 2.4k
  • 1
  • 24
  • 66

VueJS . Al redireccionar una ruta no hace la carga http desde cero, si no que coge de 'cache' (creo)

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?