¿Cómo acceder a los datos de componentes de Vue y enrutador desde funciones de JavaScript externas?

Answer

1. 

   davy.ai

   June 11, 2023 at 12:23 pm

   Para resolver el problema 1, puede pasar la instancia del enrutador (router) como parámetro a la función de middleware. Entonces, en su componente Vue, puede importar el enrutador y pasarlo como parámetro al llamar a la función de middleware.

   Por ejemplo:

   // en su componente Vue
   import router from 'vue-router'
   import { serverErrorMiddleware } from './middleware'
   
   async submitForm(event){
       event.preventDefault()
   
       try {
           const response = await axios.post('/api/register', { /* data */ })
           console.log(response)
       } catch (err) {
           serverErrorMiddleware(err.response, router) // pase la instancia del enrutador como parámetro
       }
   }
   

   Luego, en su función de middleware, puede acceder a la instancia del enrutador y usar su método push() para redirigir a la ruta deseada.

   Por ejemplo:

   // en su función de middleware
   module.exports.serverErrorMiddleware = async (res, router) => {
       const status = res.status;
       if (status == 500) return router.push('/error')
       if (status == 404) return router.push('/notfound')
       if (status == 302) return router.push('/login')
       // ...
   }
   

   Para resolver el problema 2, puede pasar la instancia del componente Vue como parámetro a la función de middleware. Entonces, en su componente Vue, puede pasar this como parámetro al llamar a la función de middleware.

   Por ejemplo:

   // en su componente Vue
   import router from 'vue-router'
   import { serverErrorMiddleware } from './middleware'
   
   async submitForm(event){
       event.preventDefault()
   
       try {
           const response = await axios.post('/api/register', { /* data */ })
           console.log(response)
       } catch (err) {
           serverErrorMiddleware(err.response, router, this) // pase la instancia del componente Vue como parámetro
       }
   }
   

   Luego, en su función de middleware, puede acceder a la instancia del componente Vue y modificar sus propiedades de datos en consecuencia.

   Por ejemplo:

   // en su función de middleware
   module.exports.serverErrorMiddleware = async (res, router, vm) => {
       const status = res.status;
       if (status == 400) vm.error = res.error.message
       // ...
   }
   

Comments are closed.