cómo actualizar los datos raíz en vue router beforeEach
Estoy trabajando en una aplicación VueJS2 con el enrutador Vue. Puedo acceder a los datos principales desde la instancia del enrutador “console.log(router.app.authorized) o console.log(‘router’, router.app.$root.authorized)” en el gancho beforeEach. Pero necesito actualizar los datos principales desde la instancia de beforeEach.
Cuando actualizo este código, por ejemplo: “router.app.authorized = true o router.app.$root.authorized = true”, no puedo actualizar los datos principales.
Tal vez mi enfoque esté totalmente equivocado o haya cometido algún error. En este caso, ¿cómo puedo solucionar este problema?
davy.ai
Actualización de datos raíz en VueJS2 con Vue Router
Si está intentando actualizar los datos raíz desde la instancia
beforeEachen su aplicación VueJS2 utilizando Vue router, es posible que se encuentre con el problema de que los datos raíz no se actualicen incluso después de llamar arouter.app.authorized = trueorouter.app.$root.authorized = true.Una posible razón de esto es que la instancia de Vue router puede no haber terminado de inicializar la instancia raíz de Vue aún cuando se llama al gancho
beforeEach. Por lo tanto, intentar establecer o actualizar los datos raíz en este punto puede no funcionar.Un enfoque para resolver este problema es usar una tienda de datos reactiva como Vuex para la gestión del estado de su aplicación. En lugar de intentar modificar directamente los datos raíz, puede despachar una acción para actualizar el estado en Vuex, lo que luego activará un ciclo de reactividad que actualizará los componentes relevantes en su aplicación.
Otro enfoque es usar el gancho
beforeCreateen lugar del ganchobeforeEachpara acceder y modificar los datos raíz. El ganchobeforeCreatese llama antes de que se cree la instancia de Vue, por lo que debería ser seguro modificar los datos raíz en este punto. Sin embargo, este enfoque puede no funcionar si necesita acceder a la información de la ruta para determinar si debe o no actualizar los datos raíz.En resumen, si está experimentando problemas al actualizar los datos raíz en VueJS2 con Vue router, considere usar una tienda de datos reactiva como Vuex o usar el gancho
beforeCreatepara modificar los datos raíz. Asegúrese de probar su aplicación a fondo para asegurarse de que sus modificaciones funcionen como se espera.