Fetching Before Navigation


#1

Hola a todos,
Estoy tratando de mejorar la carga con fetching before navigation, pero no termino de entender el ejemplo del manual
https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation
¿donde esta ubicada el metodo getPost?
Gracias


#2

El metodo getPost es una abstraccion, el mismo no existe y lo tienes que integrar tu mismo usando axios por ejemplo.


#3

Hola, gracias por la respuesta,
He intentado importar una acción con mapActions de vuex, pero me dice que no existe,
Algo así

  beforeRouteEnter (to, from, next) {
this.GETLIST(to.params.id, (err, list) => {
  if (err) {
    // display some global error message
    next(false)
  } else {
    next(vm => {
      vm.list = list
    })
  }
})

},


#4

En el momento de la ejecucion de esa funcion la instancia vue no es todavia creada, no tienes acceso a la misma usando this. Podrias probar de usar la instancia de vuex directamente:

import store from '@/store'

...beforeRouteEnter (to, from, next) {
   store.dispatch('module/path/GETLIST', to.params.id, cb)
}

#5

Gracias, algo así, lo que ahora ni siquiera muestra la ruta cuando hago click en los enlaces

<script>
import store from '../../../store'

export default {
  data () {
    return {
      list: {},
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    store.dispatch('GETLIST', to.params.id, (err, list) => {
      if (err) {
        next(false)
      } else {
        next(vm => {
          vm.list = list
        })
      }
    })
  },
  watch: {
    $route () {
      this.list = {}
      store.dispatch('GETLIST', this.$route.params.id, (err, list) => {
        if (err) {
          this.error = err.toString()
        } else {
          this.list = list
        }
      })
    }
  }
};
</script>

#6

Especifica mas, porfavor. Que rutas, que enlaces.


#7

Estos enlaces

  <v-list-tile v-for="inactive in inactives" :key="inactive.id" :to="{name: 'EditList', params: { id: inactive.id }}" @click="closeMenu">
    <v-list-tile-action>
      <v-icon color="grey lighten-1">fiber_manual_record</v-icon>
    </v-list-tile-action>
    <v-list-tile-content>
      <v-list-tile-title>
        {{ inactive.name }}
      </v-list-tile-title>
    </v-list-tile-content>
  </v-list-tile>  

Y esta ruta

{ path: ‘/app/edit/list/:id’, component: EditList, name: ‘EditList’, meta:{forAuth: true} }


#8

Asegurate que el callback de GETLIST es ejecutado, en el mismo es llamado next lo cual es necesario para que el enrutamiento continue.