Estoy tratando de crear un formulario de inicio de sesión con Vue 3, pero tengo dificultades para obtener un estado en 'tiempo real' o calculado. Entonces, cuando intento iniciar sesión como usuario desde la plantilla, se ve así.
<button class="login-button" type="button" @click="$store.dispatch('login', {email, password})"> Sign In </button>Y este botón funciona bien, está enviando datos y solicitando backend con vuex así:
actions: { async login(commit: any, payload: any ) { API.post('/login', { email: payload.email, password: payload.password }) .then((response) => ( localStorage.setItem('user', response.data.token) ) ).catch((e) => ( console.log(e.message) ) ) } },Como puede ver en las acciones, está configurando los datos del usuario en localStorage, por lo que en el estado, definí al usuario como:
state: { user: localStorage.getItem('user'), },Y lo arreglará todo, hasta ahora. Entonces, cuando intento en la navegación obtener este estado, no lo actualizará sin actualizar una página. Y lo estoy recibiendo como:
computed: { token() { return this.$store.state.user.user } },¿Por qué debería actualizar una página con este código? ¿Qué estoy haciendo mal?
Está intentando establecer un objeto que no sea vue.
app.mixin({ data() { return { localStorage: { get(prop) { return this[prop] }, set(prop, val) { window.localStorage.setItem(prop, val) return this[prop] = val } } } }, created() { window.localStorage.__proto__.get = prop => this.localStorage.get(prop) window.localStorage.__proto__.set = (prop, val) => this.localStorage.set(prop, val) window.localStorage.__proto__.get.apply(this) window.localStorage.__proto__.set.apply(this) } }) localStorage.get('propName') localStorage.set('propName', 'value') state: { get user() { return localStorage.get('user') } }