Como construir um aplicativo Vue To-Do com LocalStorage

Usando este aplicativo de exemplo familiar, aprenda tudo sobre a maneira moderna de armazenar dados da web.

LocalStorage é uma API da web, integrada em navegadores, que permite que aplicativos da web armazenem pares de valores-chave em seu dispositivo local. Ele fornece um método simples para armazenar dados, mesmo depois de fechar o navegador.

Você pode integrar LocalStorage com seus aplicativos Vue para armazenar listas e outros dados de pequeno porte. Isso permite manter os dados do usuário em diferentes sessões do aplicativo.

Após este tutorial, você terá um aplicativo de tarefas Vue funcional que pode adicionar e remover tarefas, armazenando os dados usando LocalStorage.

Configurando o aplicativo Vue To-Do

Antes de começar a codificar, certifique-se de ter instalado o Node e o NPM em seu dispositivo.

Para criar um novo projeto, execute este comando npm:

npm create vue

O comando exigirá que você selecione uma predefinição para seu novo aplicativo Vue antes de criar e instalar as dependências necessárias.

Você não precisará de recursos extras para este aplicativo de tarefas, então escolha “Não” para todas as predefinições disponíveis.

Com o projeto configurado, você pode começar a construir o aplicativo de tarefas com LocalStorage.

Criando o aplicativo de tarefas pendentes

Para este tutorial, você criará dois componentes Vue: App.vue para a estrutura geral e Todo.vue para exibir uma lista de tarefas.

Criando o componente de tarefas pendentes

Para o componente Todo, crie um novo arquivo, src/components/Todo.vue. Este arquivo cuidará da estrutura da lista de tarefas.

Cole o seguinte código no arquivo Todo.vue:

<!-- Todo.vue -->
<script setup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);
const removeTodo = (index) => {
  emit('remove-todo', index);
};
</script>
<template>
  <div class="todo-list">
    <ul>
      <li v-for="(todo, index) in props.todos" :key="index" class="todo-item">
        {{ todo.text }}
        <button @click="removeTodo(index)" class="remove-button">
          Remove
        </button>
      </li>
    </ul>
  </div>
</template>

O trecho de código acima detalha a estrutura do componente Todo. Ele configura o componente para receber dados e emitir eventos por meio do uso de props e eventos customizados, respectivamente.

Para explicar melhor, o código emprega adereços Vue para comunicação entre componentes para receber o array todos de seu componente pai, App.vue. Em seguida, ele usa a diretiva v-for para renderizar listas para iterar pelo array todos recebido.

O código também emite um evento personalizado, remove-todo, com um índice de carga útil. Isso permite remover uma tarefa específica com um índice específico na matriz todos.

Ao clicar no botão Remover, o snippet aciona a emissão do evento personalizado para o componente pai. Isso indica que você clicou no botão, solicitando a execução da função correspondente definida no componente pai, App.vue.

Criando o componente View da aplicação

Acesse App.vue para continuar criando o aplicativo Todo. O componente App cuidará da adição de novas tarefas e da renderização do componente Todo.

Cole o seguinte bloco de script em seu arquivo App.vue:

<!-- App.vue -->
<script setup>
import Todo from "./components/Todo.Vue";
import { ref } from "vue";
const newTodo = ref("");
const todos = ref([]);
const addTodo = () => {
  if (newTodo.value.trim() === "") return;
  todos.value.push({ text: newTodo.value });
  newTodo.value = "";
  saveToLocalStorage();
};
const removeTodo = (key) => {
  todos.value.splice(key, 1);
  saveToLocalStorage();
};
const saveToLocalStorage = () => {
  localStorage.setItem("todos", JSON.stringify(todos.value));
};
const savedTodos = localStorage.getItem("todos");
if (savedTodos) {
  todos.value.push(...JSON.parse(savedTodos));
}
</script>

O trecho de código acima descreve a lógica do componente App.vue. O snippet importa o componente Todo e inicializa variáveis reativas com a API Vue Composition.

O código começa com a importação do componente Todo e da função ref do caminho especificado e vue, respectivamente.

O snippet então inicializa uma string reativa, newTodo, para armazenar a tarefa que você irá inserir. Ele também inicializa um array todos reativo vazio, contendo a lista de tarefas.

A função addTodo adiciona novas tarefas ao array todos. Se newTodo não estiver vazio, ele será inserido na matriz na confirmação e redefinirá o valor newTodo para permitir que você adicione mais tarefas.

A função addTodo também invoca saveToLocalStorage, que salva o array todos no LocalStorage do navegador. O snippet usa o método setItem para conseguir isso e converte a matriz todos em uma string JSON antes do armazenamento.

Ele também define uma função removeTodo que usa uma key como parâmetro. Ele usa esta chave para remover o todo correspondente do array todos. Após a remoção, a função removeTodo chama saveToLocalStorage para atualizar os dados do LocalStorage.

Finalmente, o código usa o método getItem disponível para LocalStorage para buscar tarefas salvas anteriormente com a chave todos. Se você salvou tarefas no LocalStorage do navegador, o código as envia para o array todos.

Agora que você administrou a lógica do componente App.vue, cole o seguinte código no bloco template do seu aplicativo Vue para criar a interface do usuário:

<!-- App.vue -->
<template>
  <div class="app">
    <h1>To do List</h1>
    <div class="add-todo">
      <input v-model="newTodo" @keyup.enter="addTodo"
        placeholder="Add a new task" class="todo-input" />
      <button @click="addTodo" class="add-button">Add</button>
    </div>
    <Todo :todos="todos" @remove-todo="removeTodo" />
  </div>
</template>

O modelo usa v-model, um método de vinculação de dados no Vue para vincular a tarefa inserida à string reativa newTodo. O modelo também usa a diretiva v-on para lidar com eventos no Vue através de sua abreviação (@).

Ele usa v-on para ouvir os eventos de tecla click e enter para confirmar o newTodo.

Finalmente, o modelo usa o componente Todo que você criou primeiro para renderizar a lista de todos. A sintaxe :todos passa o array todos como uma propriedade para o componente Todo.

A sintaxe @remove-todo configura um ouvinte de evento para capturar o evento personalizado que o componente Todo emitiu e chamar a função removeTodo em resposta.

Agora que você concluiu o aplicativo, pode optar por estilizá-lo de acordo com seu gosto. Você pode visualizar seu aplicativo executando este comando:

npm run dev

Você deverá ver uma tela como esta:

Você pode adicionar ou remover tarefas no aplicativo Todo. Além do mais, graças à integração do LocalStorage, você pode atualizar o aplicativo ou sair dele completamente; sua lista de tarefas selecionada permanecerá intacta.

Importância do armazenamento local

A integração do LocalStorage em aplicações web é essencial para desenvolvedores novatos e experientes. LocalStorage apresenta aos iniciantes a persistência de dados, permitindo-lhes armazenar e recuperar conteúdo gerado pelo usuário.