Espero que dê pra entender. Algumas linhas de códigos foram omitidas. index.ts
export const store = createStore<Estado>({
state: {
projetos: [],
tarefas: [],
notificacoes: []
},
mutations: {
//-----------------------------------------------------------------------
[ADICIONA_TAREFA](state, tarefa:ITarefa){
state.tarefas.push(tarefa)
},
Formulario.vue
export default defineComponent({
name: 'FormularioVue',
//array de texto com os eventos que ele emite
emits: ['aoSalvarTarefa'],
components: {
Temporizador
},
//método que retorna um estado
data () {
return {
descricao: '',
idProjeto: '',
}
},
methods: {
finalizarATarefa(tempoDecorrido: number): void{
this.$emit('aoSalvarTarefa', {
id: new Date().toISOString(),
duracaoEmSegundos: tempoDecorrido,
descricao: this.descricao,
projeto: this.projetos.find(projetoItem => projetoItem.id == this.idProjeto)
}as ITarefa)
this.descricao = '';
}
},
setup(){
const store = useStore();
return {
projetos: computed(() => store.state.projetos),
store
}
}
});
Tarefa.vue
<div class="column is-three-quarter conteudo">
<FormularioVue @aoSalvarTarefa="salvarTarefa"/>
<div class="lista">
<Tarefa v-for="tarefa in tarefas" :key="tarefa.id" :tarefa="tarefa" />
<Box v-if="true">
Você não está produtivo hoje :(
</Box>
</div>
</div>
export default defineComponent({
name: 'Tarefas',
components: {
FormularioVue,
Tarefa,
Box
},
//estado do componente que retorna um objeto
data () {
return{
//tarefas: [] as ITarefa[],
modoEscuroAtivo: false
}
},
methods:{
salvarTarefa (tarefa: ITarefa){
this.store.commit(ADICIONA_TAREFA, tarefa)
console.log(tarefa.projeto);
},
trocarTema(modoEscuroAtivo: boolean){
this.modoEscuroAtivo = modoEscuroAtivo;
},
},
setup (){
const store = useStore();
return{
tarefas: computed(() => store.state.tarefas),
store
}
}
});
Tarefa.vue
<Box>
<div class="columns">
<div class="column is-7">
{{tarefa.descricao || 'Tarefa sem descrição'}}
</div>
<div class="column">
<Cronometro :tempoEmSegundos="tarefa.duracaoEmSegundos" />
</div>
<!-- <button class="button ml-2 is-danger" @click="excluir(tarefa)">
<span class="icon is-small">
<i class="fas fa-trash"></i>
</span>
</button> -->
</div>
</Box>
export default defineComponent({
name: "Tarefa",
components: {
Cronometro,
Box
},
methods:{
excluir(tarefa:ITarefa){
this.store.commit(EXCLUI_TAREFA, tarefa)
}
},
props: {
tarefa: {
type: Object as PropType<ITarefa>,
required: true
}
},
setup(){
const store = useStore();
return{
store
}
}
})