store.state.tarefa.tarefas is undefined | Vue3: composition API e Vuex

Olá!

Quando eu faço reload da página aparece um runtime error que não consigo perceber como corrigir. É relacionado à minha view Tarefas.vue. Poderiam ver se conseguem me ajudar?

<template>
  <Formulario @aoSalvarTarefa="salvaTarefa" />
  <div class="lista">
    <div class="field">
      <p class="control has-icons-left">
        <input
          class="input"
          type="text"
          placeholder="Digite para filtrar"
          v-model="filtro"
        />
        <span class="icon is-small is-left">
          <i class="fas fa-search"></i>
        </span>
      </p>
    </div>
    <Tarefa
      v-for="(tarefa, index) in tarefas"
      :key="index"
      :tarefa="tarefa"
      @aoTarefaClicada="adicionarTarefa"
    />
    <Box v-if="listaEstaVazia && !filtro">
      Você não está muito produtivo hoje! :(
    </Box>
    <Box v-else-if="listaEstaVazia && filtro">
      Nenhum resultado encontrado
    </Box>
    <div
      class="modal"
      :class="{ 'is-active': tarefaSelecionada }"
      v-if="tarefaSelecionada"
    >
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Editando uma tarefa</p>
          <button
            @click="fecharModal"
            class="delete"
            aria-label="close"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="field">
            <label for="descricaoDaTarefa" class="label"> Descrição </label>
            <input
              type="text"
              class="input"
              v-model="tarefaSelecionada.descricao"
              id="descricaoDaTarefa"
            />
          </div>
        </section>
        <footer class="modal-card-foot">
          <button class="button is-success" @click="alterarTarefa">
            Salvar alterações
          </button>
          <button @click="fecharModal" class="button">Cancelar</button>
        </footer>
      </div>
    </div>
  </div>
</template>
  
  <script lang="ts">
import { computed, defineComponent, ref, watchEffect } from "vue";
import { useStore } from "@/store";
import Formulario from "../components/Formulario.vue";
import Tarefa from "../components/Tarefa.vue";
import ITarefa from "../interfaces/ITarefa";
import Box from "../components/Box.vue";
import { TipoNotificacao } from "@/interfaces/INotificacao";
import { notificacaoMixin } from "@/mixins/notificar";
import {
  ALTERAR_TAREFA,
  CADASTRAR_TAREFA,
  OBTER_PROJETOS,
  OBTER_TAREFAS,
} from "@/store/tipo-acoes";

export default defineComponent({
  name: "tarefas-view",
  components: {
    Formulario,
    Tarefa,
    Box,
  },
  data() {
    return {
      tarefaSelecionada: null as ITarefa | null,
    };
  },
  mixins: [notificacaoMixin], //reusing code by mixins
  computed: {
    listaEstaVazia(): boolean {
      return this.tarefas.length === 0;
    },
  },
  methods: {
    salvaTarefa(tarefa: ITarefa): void {
      if (tarefa.projeto == undefined) {
        this.notificar(
          TipoNotificacao.FALHA,
          "Não foi possível adicionar tarefa.",
          "A tarefa precisa estar relacionada a algum projeto."
        );
        return;
      }
      this.store.dispatch(CADASTRAR_TAREFA, tarefa);
      this.notificar(
        TipoNotificacao.SUCESSO,
        "Tarefa adicionada.",
        "A tarefa foi incluída na lista."
      );
    },
    adicionarTarefa(tarefa: ITarefa) {
      this.tarefaSelecionada = tarefa;
    },
    fecharModal() {
      this.tarefaSelecionada = null;
    },
    alterarTarefa() {
      this.store
        .dispatch(ALTERAR_TAREFA, this.tarefaSelecionada)
        .then(() => this.fecharModal());
    },
  },
  setup() {
    const store = useStore();
    
    const filtro = ref("");
    store.dispatch(OBTER_TAREFAS);
    store.dispatch(OBTER_PROJETOS);

    const tarefas = computed(() =>
      store.state.tarefa.tarefas.filter(
        (t) => !filtro.value || t.descricao.includes(filtro.value)
      )
    );

    return {
      store,
      filtro,
      tarefas,
    };
  },
});
</script>

Olá, Anastácia!

Pelo código que você compartilhou, o erro "store.state.tarefa.tarefas is undefined" ocorre porque a propriedade tarefas não está definida no estado tarefa do seu store.

Para corrigir esse erro, você precisa garantir que a propriedade tarefas esteja definida no estado tarefa do seu store. Certifique-se de que você está populando corretamente essa propriedade no momento da inicialização do seu store ou antes de acessá-la no componente Tarefas.vue.

Por exemplo, você pode ter um módulo tarefa no seu store com uma propriedade tarefas inicializada como um array vazio:

// store/tarefa.js

export default {
  state: {
    tarefas: [],
  },
  // ...
}

Dessa forma, quando você fizer o reload da página, a propriedade tarefas estará definida e o erro não será mais lançado.

Testa por gentileza.

Espero ter ajudado e bons estudos!