Managing State

As the application grows, managing state becomes more important. In this step, you will improve how tasks are stored and updated.

Instead of using simple strings, store tasks as objects. This allows you to add more properties, such as completion status.

<script setup>
import { ref } from "vue";

const newTask = ref("");
const tasks = ref([
  { id: 1, text: "Finish homework", completed: false },
  { id: 2, text: "Read 10 pages", completed: false }
]);
</script>

Update the function to add tasks as objects.

<script setup>
import { ref } from "vue";

const newTask = ref("");
const tasks = ref([
  { id: 1, text: "Finish homework", completed: false },
  { id: 2, text: "Read 10 pages", completed: false }
]);

function addTask() {
  if (newTask.value !== "") {
    tasks.value.push({
      id: Date.now(),
      text: newTask.value,
      completed: false
    });
    newTask.value = "";
  }
}
</script>

Update the template to display task objects.

<template>
  <ul>
    <li v-for="task in tasks" :key="task.id">
      {{ task.text }}
    </li>
  </ul>
</template>

You can now extend the logic, for example by marking tasks as completed.

<script setup>
function toggleTask(task) {
  task.completed = !task.completed;
}
</script>

<template>
  <li
    v-for="task in tasks"
    :key="task.id"
    @click="toggleTask(task)"
  >
    {{ task.text }}
  </li>
</template>

Managing state in this way makes your application more flexible and easier to extend.