Search code examples
vue-composition-apipinia

state is reseting after pinia-plugin-persistedstate is configurated


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
  }
)

Solution

  • You are not returning your states, include you variables inside the returned object