Persistência de Estado(Stores)

A persistência de estado é uma característica crucial em muitas aplicações web modernas, permitindo que os dados do usuário permaneçam acessíveis mesmo após o navegador ser fechado ou recarregado. No contexto de aplicações Vue.js utilizando Pinia como gerenciador de estado, a persistência pode ser implementada de diversas formas para garantir que o estado seja mantido através de sessões. Vamos explorar como você pode implementar a persistência de estado usando TypeScript.

Abordagens Comuns para Persistência de Estado

1. LocalStorage: Uma das formas mais comuns de persistir o estado é através do LocalStorage do navegador, que permite armazenar dados de forma simples e acessível.

2. SessionStorage: Similar ao LocalStorage, mas os dados persistem apenas durante a sessão da página, sendo limpos quando a aba é fechada.

3. Cookies: Outra opção é usar cookies, que podem ser configurados para expirar após um certo período ou ao fechar o navegador.

4. Bancos de Dados Indexados (IndexedDB): Para uma solução mais robusta, especialmente com grandes quantidades de dados ou dados complexos, o IndexedDB pode ser uma opção.

Implementando Persistência com LocalStorage em Pinia

Aqui está um exemplo de como você pode implementar a persistência de estado com LocalStorage em uma aplicação Pinia com TypeScript:

// src/stores/useUserStore.ts
import { defineStore } from "pinia";

interface UserState {
  username: string;
  token: string;
}

// Função auxiliar para carregar o estado inicial do LocalStorage
function loadState(): UserState {
  const data = localStorage.getItem("userState");
  if (data) {
    return JSON.parse(data) as UserState;
  }
  return { username: "", token: "" };
}

export const useUserStore = defineStore("user", {
  state: (): UserState => loadState(),
  actions: {
    setUser(username: string, token: string) {
      this.username = username;
      this.token = token;
      this.saveState();
    },
    saveState() {
      localStorage.setItem("userState", JSON.stringify(this.$state));
    },
    clearState() {
      localStorage.removeItem("userState");
      this.$reset();
    },
  },
});

Explicação do Código:

• loadState: Esta função tenta recuperar o estado do usuário do LocalStorage. Se dados forem encontrados, eles são convertidos de volta para o objeto UserState.

• state: O estado inicial da store é definido chamando loadState, que configurará o estado com valores persistidos se disponíveis.

• setUser: Uma ação para atualizar o estado do usuário e invocar a saveState para persistir essas mudanças.

• saveState: Persiste o estado atual no LocalStorage. Essa função é chamada sempre que o estado precisa ser atualizado.

• clearState: Limpa o estado do usuário do LocalStorage e reseta o estado na store.

Melhores Práticas

• Segurança: Tenha cuidado com o tipo de dados que você persiste. Evitar armazenar dados sensíveis como senhas ou informações pessoais sem criptografia adequada.

• Desempenho: O uso excessivo de LocalStorage ou operações síncronas pode afetar o desempenho. Avalie a necessidade de cada dado persistido e sua frequência de acesso.

• Sincronização de Estado: Se sua aplicação estiver aberta em várias abas, certifique-se de que o estado seja sincronizado entre as abas. Isso pode ser feito usando eventos de armazenamento ou outras técnicas de sincronização de estado.

Implementar a persistência de estado em Pinia com TypeScript não apenas melhora a experiência do usuário, mantendo os dados acessíveis entre sessões, mas também ajuda a manter o estado da aplicação consistente e previsível.