I need to persist my localStorage that is reseting after I reload a page of vue 3 composition API with setup, what is doing is just what I said, when I launch the app all the variables are saved in localstorage as expected but when I reload this plugin is installed following its github, all the values goes to initial values... How can I achieve the expected behavior?
Pinia store:
export const useUsersStore = defineStore(
'Users store',
() => {
const id: string = 'usersStore'
//state
const logged = ref<boolean>(false)
const logeado = ref<string>('')
const userG = ref<IUser>()
const nombreUsuario = ref<string>('')
//getters
const getUser = computed(() => {
return userG.value
})
const isLogged = computed(() => {
return logged.value
})
const userName = computed(() => {
return nombreUsuario.value
})
watch(
() => [logged.value, userG.value, nombreUsuario.value],
() => {
if (!isLogged.value) {
aterrizar()
}
},
{
deep: true
}
)
const setUser = (user: IUser) => {
console.log('seteando usuario')
userG.value = user
logged.value = true
nombreUsuario.value = user.nombre_completo
logeado.value = 'true'
localStorage.setItem('currentUser', JSON.stringify(userG.value))
localStorage.setItem('logeado', JSON.stringify(String(isLogged.value)))
localStorage.setItem('nombreUsuario', JSON.stringify(nombreUsuario.value))
}
const logout = () => {
despeguar()
logged.value = false
logeado.value = 'false'
nombreUsuario.value = ''
userG.value = {
id: 0,
usu_codigo: 0,
cli_codigo: null,
nombre_completo: '',
servicios: [],
roles: [],
permisos: [],
login_liferay: '',
pass_liferay: '',
landing: '',
iat: 0,
exp: 0
}
}
return {
id,
getUser,
isLogged,
userName,
setUser,
logout
}
},
{
persist: true
}
)
You are not returning your states, include you variables inside the returned object