Como criar uma aplicação Vue To-Do com LocalStorage
LocalStorage é uma API Web, incorporada nos browsers, que permite às aplicações Web armazenar pares de valores chave no seu dispositivo local. Fornece um método simples para armazenar dados, mesmo depois de fechar o browser.
A integração da LocalStorage em aplicações Vue facilita a preservação dos dados do utilizador durante várias sessões, permitindo o armazenamento de listas e de pequenos fragmentos de informação para uma continuidade perfeita da experiência do utilizador.
Após a conclusão deste tutorial, você terá um aplicativo de tarefas Vue totalmente operacional, capaz de adicionar e remover tarefas enquanto utiliza o LocalStorage para fins de armazenamento de dados.
Configurando o aplicativo Vue To-Do
Certifique-se de ter instalado corretamente o Node e o NPM em seu sistema de computação antes de iniciar qualquer tarefa de programação.
Para estabelecer um novo empreendimento, execute a seguinte instrução npm:
npm create vue
Antes de gerar uma nova aplicação Vue, é necessário escolher uma configuração ou instalação predefinida de uma lista de opções disponíveis para orientar o processo de instalação. Esta seleção garante que as características e funcionalidades pretendidas são incluídas no projeto de acordo com as preferências especificadas.
Não há necessidade de funcionalidades adicionais nesta aplicação de gestão de tarefas, pelo que seria prudente selecionar “Não” para cada uma das opções oferecidas.
Depois de o projeto ter sido configurado e inicializado, pode começar a construir uma ferramenta de gestão de tarefas utilizando o LocalStorage como base.
Criando o aplicativo To-Do
um que engloba o layout geral (App.vue) e outro que exibe um inventário de tarefas (Todo.vue).
Criar o componente To-Do
Para desenvolver o componente Todo, é necessário criar um novo ficheiro no diretório “src/components” e designá-lo por “Todo.vue”. A principal função deste ficheiro será gerir a disposição organizacional da lista de tarefas.
php Meus Todos {{ todo.text }} Delete import { mapGetters } from ‘vue’export default {name: “Todo”,data() {return {todos: [] // inicializa array vazio de todos}},computed: {…mapGetters([’todos’]
<!-- 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 excerto de código fornecido delineia a arquitetura do componente Todo. Ao utilizar props para a transmissão de dados e eventos personalizados para a emissão de eventos, este componente estabelece um meio através do qual pode receber informações e despachar ocorrências, facilitando assim a comunicação entre os seus vários elementos.
O código utiliza props do Vue como um meio de comunicação entre componentes para recuperar a matriz “todos” de seu componente pai, App.vue. A diretiva “v-for” é posteriormente utilizada para processar iterativamente uma lista com base no conjunto de todos recuperado.
O código gera um evento único, conhecido como “remove-todo”, que inclui uma carga útil associada identificada como “index”. Ao utilizar este evento e a sua carga correspondente, é possível remover efetivamente um item específico dentro do conjunto mais vasto de “todos” com um valor de índice numérico designado.
Ao clicar no botão “Remover”, é emitido um evento personalizado pelo snippet associado, que se propaga para o componente principal, indicando que houve interação com o botão e iniciando a execução da função especificada que reside no componente principal, nomeadamente App.vue.
Criando o componente de exibição do aplicativo
Prossiga para o arquivo App.vue a fim de desenvolver ainda mais o aplicativo To-Do. O componente App é responsável por gerenciar a criação de tarefas e exibir o componente To-Do na tela.
‘Bem-vindo de volta!’,duration: 5000,position: ’top-right’,hideProgressBar: true,isAjax: false,afterClose: () => {// Navegar para casa pagenavigate(’/home’)},})} else {console.log( Estado desconhecido: ${store.value} )}})
<!-- 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 excerto de código acima mencionado delineia o raciocínio subjacente englobado pelo componente App.vue, que incorpora a importação e a inicialização de parâmetros reactivos através da API de composição Vue do componente Todo.
A etapa inicial do processo de implementação envolve a importação do componente Todo e de uma função de referência, cada um derivado de fontes distintas - especificamente, o componente Todo é obtido por meio de um módulo importado localizado em um caminho predefinido, enquanto a função de referência tem origem na própria biblioteca Vue.
O segmento de código estabelece subsequentemente um identificador de cadeia de resposta, referido como “newTodo”, para acomodar a tarefa que será introduzida. Além disso, cria uma matriz reactiva vazia chamada “todos”, que serve de repositório para a listagem de tarefas.
A função addTodo serve para incorporar novas tarefas na lista existente de todos . Desde que a variável de entrada newTodo contenha um valor não nulo, este será anexado à matriz após confirmação do utilizador, repondo consequentemente o conteúdo de newTodo para permitir mais entradas de tarefas.
A função addTodo não só adiciona um novo item de tarefa, como também invoca a função saveToLocalStorage , que armazena a matriz todos actualizada no armazenamento local do navegador, utilizando o método setItem . No entanto, antes de ser armazenada, a matriz todos é convertida numa cadeia JSON para facilitar o processamento durante a recuperação.
A implementação de removeTodo envolve a aceitação de um identificador específico como entrada, referido como uma “chave”, que é subsequentemente empregue para erradicar a tarefa correlacionada da coleção de tarefas, conhecida como o conjunto “todos”. Após o processo de remoção, a função removeTodo invoca o método saveToLocalStorage para atualizar os dados armazenados no sistema de armazenamento local do browser.
Por último, o programa utiliza a função getItem inerente ao Local Storage para recuperar tarefas previamente armazenadas sob a chave ’todos’. Se existirem tarefas preservadas no Armazenamento Local do navegador, são subsequentemente adicionadas à matriz ’todos’.
O código acima é um modelo para a interface de utilizador de uma aplicação escrita utilizando a estrutura Vue. Contém um elemento div com o id “app” que serve como nó de raiz para a IU da aplicação e inclui um título, um formulário e um elemento de botão. O elemento de título exibe texto entre dois elementos h1, enquanto os elementos de formulário e botão não são visíveis porque ainda não existem.
<!-- 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 utiliza a diretiva v-model , que é um mecanismo utilizado na estrutura Vue para estabelecer uma relação de ligação de dados bidirecional entre um elemento de entrada e uma variável reactiva local ou propriedade conhecida como ’newTodo’. Além disso, o modelo utiliza a diretiva v-on , que serve como meio de tratamento de eventos no ecossistema Vue através da sua notação sucinta referida como ’ ’ seguida do símbolo ‘@’, permitindo uma gestão eficiente das interacções do utilizador com a aplicação.
O componente utiliza a diretiva v-on para monitorizar os eventos de clique e de introdução de teclas, de modo a validar a tarefa recentemente adicionada.
Concluindo, o modelo emprega o componente Todo definido anteriormente, utilizando a tag . Isso permite a renderização da lista de tarefas por meio do fornecimento da matriz todos como um argumento para o componente Todo por meio da sintaxe mencionada anteriormente, “:todos”.
A sintaxe @remove-todo estabelece um ouvinte para um evento personalizado que é emitido pelo componente Todo e, ao detetar este evento, desencadeia a invocação da função removeTodo em conformidade.
Ao finalizar o desenvolvimento da aplicação, é-lhe dada a opção de personalizar o seu aspeto de acordo com as suas preferências. Para ver uma demonstração do seu trabalho, basta executar o comando fornecido.
npm run dev
Deverá ver um ecrã como este:
A aplicação Todo fornece aos utilizadores a capacidade de adicionar e remover tarefas à sua discrição. Além disso, esta funcionalidade é melhorada através de uma integração perfeita com o LocalStorage, que garante que, mesmo depois de atualizar a aplicação ou de a fechar completamente, todos os itens de tarefas permanecem armazenados em segurança para acesso posterior.
Importância da LocalStorage
A incorporação da funcionalidade LocalStorage nas plataformas Web tem uma importância significativa tanto para os recém-chegados como para os profissionais experientes, uma vez que lhes permite compreender a retenção de dados através da preservação e recuperação de informações criadas pelo utilizador.
A utilização do LocalStorage é benéfica, pois preserva os dados do utilizador de forma persistente ao longo de várias sessões de navegação, evitando assim a necessidade de interacções frequentes com o servidor, o que pode resultar num melhor desempenho e numa maior capacidade de resposta das aplicações baseadas na Web através de tempos de carregamento reduzidos.