Entrar Ainda não tem acesso?
1
resposta

erro: Cannot read properties of undefined (reading 'state')

Referente ao curso Vue3: avançando no framework

por letiane thomas hendges
| 66.5k xp | 3 posts

Olá, estou com problemas no meu código. Eu adaptei o curso para um site de casamento e a parte de recados equivale à parte de projetos que foi feita no curso. Porém, eu estou recebendo o seguinte erro no navegador: "Cannot read properties of undefined (reading 'state') TypeError: Cannot read properties of undefined (reading 'state')".

Parte dos recados na Views:

<template>
    <section class="has-text-centered">
        <h2 class="title primary-font"> Recados </h2>
        <form @submit.prevent="salvar">
            <div class="field">
                <label for="conteudoDoRecado" class="columns"></label>
                <section class="columns is-gapless is-multiline">
                    <input type="text" class="input column is-three-quarter has-text-centered"
                        v-model="conteudoDoRecado" id="conteudoDoRecado"
                        placeholder="Qual mensagem você deseja deixar para os noivos?">
                </section>
            </div>
            <div class="field">
                <button class="button" type="submit">
                    Salvar
                </button>
            </div>
        </form>
        <section v-for="recado in recados" :key="recado.id" class="columns box mt-5">
            <div class="column is-three-quarter has-text-centered ">
                <h5 class="third-font"> {{ recado.nome }} </h5>
                <h5 class="third-font"> {{ recado.id }} </h5>

            </div>
        </section>




    </section>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { useStore, store } from '../store/index';

export default defineComponent({
    name: 'Recados',
    data() {
        return {
            conteudoDoRecado: ""
        }
    },
    methods: {
        salvar() {
            this.store.commit('ADICIONA_RECADO', this.conteudoDoRecado)
            this.conteudoDoRecado = "";
        }, 
    },
    setup() {
        const store = useStore()
        return {
            store,
            recados: computed(() => store.state.recados)
        }
    },
    
})
</script>

<style scoped>
.primary-font {
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
    font-size: 30px;
}

.third-font {
    font-family: "Quicksand", sans-serif;
    font-weight: 200;
    font-size: 25px;
}
</style>

Parte do código na store: 

import { Store, createStore, useStore as vuexUseStore } from "vuex";
import { InjectionKey } from "vue";
import IRecado from "@/interfaces/IRecado";

interface Estado {
    recados: IRecado[];
}


export const key: InjectionKey<Store<Estado>> = Symbol()

export const store = createStore<Estado>({
    state: {
        recados: [],
    },
    mutations: {
        'ADICIONA_RECADO'(state, conteudoDoRecado: string){
            const recado = {
                id: new Date().toISOString(),
                nome: conteudoDoRecado
            } as IRecado
            state.recados.push(recado)
        }
    },
    
})

export function useStore():Store<Estado> {
    return vuexUseStore(key)
}
1 resposta
por Renan Lima
| 3708.1k xp | 7842 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Letiane.

Tudo bem?

Esse erro geralmente ocorre quando o Vue não consegue encontrar a propriedade state no seu store. Isso pode acontecer por alguns motivos, mas o mais comum é que o store não esteja sendo corretamente injetado no seu componente.

Vamos revisar alguns pontos importantes para garantir que tudo está configurado corretamente:

  1. Certifique-se de que o store está sendo provido para a aplicação Vue:

    No arquivo principal da sua aplicação (geralmente main.ts ou main.js), você precisa garantir que o store está sendo injetado na instância do Vue. Algo assim:

    import { createApp } from 'vue';
import App from './App.vue';
import { store, key } from './store';

const app = createApp(App);
app.use(store, key);
app.mount('#app');

  2. Verifique a importação e uso do store no seu componente:

    No seu componente Recados, você está importando useStore e store de ../store/index. Certifique-se de que o caminho está correto e que o store está sendo corretamente configurado.

  3. Uso do store no método salvar:

    No método salvar, você está chamando this.store.commit, mas this.store não está definido no data ou methods. Como você está usando o setup, você deve acessar o store diretamente no setup.

    Uma maneira de resolver isso é alterar o método salvar para usar o store diretamente do setup:

    <script lang="ts">
import { computed, defineComponent } from 'vue';
import { useStore } from '../store/index';

export default defineComponent({
    name: 'Recados',
    data() {
        return {
            conteudoDoRecado: ""
        }
    },
    setup() {
        const store = useStore();
        const recados = computed(() => store.state.recados);

        const salvar = () => {
            store.commit('ADICIONA_RECADO', this.conteudoDoRecado);
            this.conteudoDoRecado = "";
        }

        return {
            store,
            recados,
            salvar
        }
    },
})
</script>

    Note que movi o método salvar para dentro do setup e estou retornando ele, para que possa ser usado no template.

  4. Verifique se o key está sendo usado corretamente:

    Certifique-se de que o key está sendo usado tanto na criação do store quanto na função useStore.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.