# Estado temporário

Você pode usar o estado temporário para armazenar e fazer referência a dados locais em um aplicativo. Cada vez que você carrega ou atualiza um aplicativo, o valor do estado temporário é redefinido.

## Cenários de casos de uso

Os estados temporários podem ajudar nos seguintes cenários:

* Para rastrear os valores temporários de uma variável quando o usuário interage com seu aplicativo.
* Para armazenar seus dados apenas em operação sem persistir em um banco de dados.
* Para funcionar como uma propriedade temporária quando propriedades integradas no PocketBlocks (como `{{tabela.selectedRow}}` e `{{seletor.value}}`) não suportam seu caso de uso.

  <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Para armazenar e acessar dados em aplicativos no seu espaço de trabalho, use o localStorage.</p></div>

## Crie um estado temporário

Clique em **+ Novo** e selecione **Estado temporário** no editor de consultas.

<figure><img src="https://3319212993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fbz5pg8HuItSzRC8Qjkc6%2Fuploads%2Fgit-blob-af21e42d8590fe1c47d9e4aa657773e4100e2ae5%2F01.png?alt=media" alt=""><figcaption></figcaption></figure>

Você pode renomear o estado temporário e definir um valor inicial.

<figure><img src="https://3319212993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fbz5pg8HuItSzRC8Qjkc6%2Fuploads%2Fgit-blob-43b528a5e6775200e05e0e5eda0f68f53b9d65e3%2F02.png?alt=media" alt=""><figcaption></figcaption></figure>

## Definindo valores de estado

O estado temporário oferece métodos `setValue()` e `setIn()` para definir ou alterar seu valor, que podem ser chamados em consultas JavaScript.

Use `setValue()` para alterar o valor diretamente.

```javascript
//state.setValue(value: any)
state.setValue(3);
state.setValue(input1.value);
```

Quando o valor inicial de um estado temporário é um objeto, use `setIn()` para alterar o valor em um caminho especificado.

```javascript
// valor inicial de estado2 da seguinte forma:
{
    garota: {
        nome: "Lucia",
        idade: 18,
        cidade: {
            nome: "Nova Iorque"
        }
     }
     garoto: {
         nome: "Bob",
         idade: 21,
         cidade: {
             nome: "Los Angeles"
         }
     }
}
//Para alterar o valor em um caminho especificado
//estado.setIn(caminho, qualquerValor)
//caminho: uma matriz de chaves ou índices. Somente o último item do caminho será alterado.
estado2.setIn(['garota','cidade'],{nome:'Seatle'})
estado2.setIn(['garoto','idade'],18)


// Para definir o valor da matriz de valor, você pode usar
// valor inicial = ["olá", "mundo"]
estado2.setIn([1],"fulano") // isso resultará em ["olá", "fulano"]
```

Você também pode chamar esses dois métodos em [manipuladores de eventos](https://pocketblocks.pedroza.dev/portugues-brasil/construcao-de-aplicativos/event-handlers). Selecione **Definir estado temporário** como ação e escolha o método sob demanda.

<figure><img src="https://3319212993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fbz5pg8HuItSzRC8Qjkc6%2Fuploads%2Fgit-blob-33aabacaf95efc0bb82e1c8a2002df398845671c%2F03.png?alt=media" alt=""><figcaption></figcaption></figure>

## Exemplo: Incremento de um contador

Neste exemplo, o contador rastreia o número de cliques no botão. Cada vez que o usuário clica no botão, o número no componente de texto aumenta em um.

<figure><img src="https://3319212993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fbz5pg8HuItSzRC8Qjkc6%2Fuploads%2Fgit-blob-27cd7081b78fc5d80f7892a488ed66474931d17e%2F04.png?alt=media" alt=""><figcaption></figcaption></figure>

Crie um contador de incremento nas seguintes etapas:

1. Adicione um componente de botão `botao1` e um componente de texto `texto1`.
2. Crie um estado temporário `estado1`, defina seu valor inicial como `0`. Vincule `{{estado1.value}}` como o texto de exibição de `texto1`.

   <figure><img src="https://3319212993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fbz5pg8HuItSzRC8Qjkc6%2Fuploads%2Fgit-blob-8d74b984f133658d234f13e698b9ec1153988783%2F05.png?alt=media" alt=""><figcaption></figcaption></figure>
3. Adicione um manipulador de eventos para `botao1`. Selecione a ação **Definir estado temporário** e o método **setValue**, e então defina `{{estado1.value+1}}` como o valor.

   <figure><img src="https://3319212993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fbz5pg8HuItSzRC8Qjkc6%2Fuploads%2Fgit-blob-80a8e3ad7472721bf453ae298bbe476ffd984091%2F06.png?alt=media" alt=""><figcaption></figcaption></figure>
4. Clique no botão, você pode ver que o valor de `texto1` aumenta em um cada vez que você clica.

   <figure><img src="https://github.com/internoapp/pocketblocks/blob/main/docs/pt-br/.gitbook/assets/build-apps/write-javascript/temporary-state/07.png" alt=""><figcaption></figcaption></figure>

Você também pode obter o mesmo resultado usando consultas JavaScript:

1. Adicione uma nova consulta e selecione **Executar código JavaScript**.
2. Escreva a consulta JavaScript com este código e configure-a para ser invocada manualmente:\
   `estado1.setValue(estado1.value + 1)`
3. Adicione um manipulador de eventos `botao1` para executar `consulta1`.

   <figure><img src="https://3319212993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fbz5pg8HuItSzRC8Qjkc6%2Fuploads%2Fgit-blob-e3fc9c462e0b2e860a365acece23ab566166d70f%2F08.png?alt=media" alt=""><figcaption></figcaption></figure>

Agora clique no botão **Incrementar contador**, você deverá ver o mesmo resultado acima.
