0

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 :href="" 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?

1 respuesta 1

0

He encontrado una manera para que recarge la pagina, no se si es la mejor, pero es la que he contrado y la que me voy a quedar por ahora, insisto, si alguien tiene alguna otra forma de recargar los datos tras un $router.push() que lo deje aqui. Gracias.


Con el hook beforeUpdate he conseguido recargar la pagina cuando accedo a esta desde otra, aqui un ejemplo de lo que he hecho:

  beforeUpdate() {
    this.loadUsers(); // this.$store.dispatch('user/getAllUsers')
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.