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)
}