Soy nuevo en Vue.js y he creado una página de edición de perfil donde los usuarios pueden editar información básica como:
Ejemplo de entrada:
<b-col sm="6"> <b-form-group label="First Name" label-for="firstName" > <validation-provider #default="{ errors }" name="First Name" rules="required" > <b-form-input id="firstName" v-model="firstName" placeholder="First Name" name="firstName" /> <small class="text-danger">{{ errors[0] }}</small> </validation-provider> </b-form-group> </b-col>Ahora estoy cargando el valor del usuario desde el valor del estado de esta manera:
data() { return { firstName: '', lastName: '', email: '', required, } }, mounted() { this.firstName = this.$store.state.authUser.user.firstName this.lastName = this.$store.state.authUser.user.lastName this.email = this.$store.state.authUser.user.email },Funciona perfectamente y muestra valor en la entrada. Pero cuando el usuario presiona la actualización completa, los valores desaparecen de todas las entradas.
¿Alguna idea de cómo resolver este problema? No puedo encontrar ninguna forma ya que soy nuevo en Vue.js y estoy trabajando en el primer proyecto.
Gracias
La tienda solo está en la memoria, por lo que si la página se actualiza, todos los datos desaparecen.
Hay varias formas de guardar los datos en el navegador y conservarlos, incluso después de actualizar. Sugeriría buscar en algo como: https://github.com/robinvdvleuten/vuex-persistedstate
También encontré su pregunta ya respondida aquí: estado de Vuex en la actualización de la página
Allí también se sugiere usar un estado persistente como este: import { Store } from 'vuex' import createPersistedState from 'vuex-persistedstate' import * as Cookies from 'js-cookie'
const store = new Store({ // ... plugins: [ createPersistedState({ getState: (key) => Cookies.getJSON(key), setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true }) }) ] })Además, dado que eres un principiante, aquí hay un truco para hacer que tu código sea un poco más ordenado. Importar mapState así:
import { mapState } from 'vuex';Y usa las variables de tu tienda así:
computed: { ...mapState({ firstName: state => state.authUser.user.firstName, lastName: state => state.authUser.user.lastName , email: state => state.authUser.user.email , }), },Entonces puedes usarlos como de costumbre.