Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Editando um projeto

Referente ao curso Vue3: avançando no framework

por Leonides Pires Oliveira Neto
| 169.8k xp | 40 posts
Analista de Sistema

Ao editar o projeto, foi feita a separação nas views e foi adicionado mais uma mutations. Depois das alterações feitas, não consigo salvar nenhum projeto, pois ele não salva, só vai para tela em branco: Segue abaixo o código:

views/Formulario.vue

  mounted (){
    if(this.id){
      const projeto = this.store.state.projetos.find(proj => proj.id == this.id)
      this.nomeDoProjeto = projeto?.nome  ??''
    }
  },
  
  methods: {
    salvar() {
      
      if (this.id) {
        this.store.commit('ALTERA_PROJETO', {
          id: this.id,
          nome: this.nomeDoProjeto
        })
      } else {
        this.store.commit('ADICIONA_PROJETO', this.nomeDoProjeto)
      }
      this.nomeDoProjeto = "";
      this.$router.push('/projetos')
    },
  },

store/index.ts

export const store = createStore<Estado>({
    state:{
        projetos:[]
        
    }, 
    mutations:{
        ['ADICIONA_PROJETO'](state, nomeDoProjeto: string){
            console.log('salvando o projeto')
            const projeto = {
                id: new Date().toISOString(),
                nome: nomeDoProjeto
            } as IProjeto
            state.projetos.push(projeto)
        },
        ['ALTERA_PROJETO'](state, projeto: IProjeto){
            console.log('Editando o projeto')
            const index = state.projetos.findIndex(proj => proj.id == projeto.id)
            state.projetos[index] = projeto
        }
    }
})

Caso queira o link do projeto. https://github.com/poliveiraneto/tarefas

5 respostas
por Estudante
| 565.5k xp | 1338 posts

E aí beleza?

Quando você dá um "salvar", ele chama o método salvar(), que faz uns commits no store. Só que, depois disso, vc faz um this.$router.push('/projetos'). Sei não, mas pode ser que isso esteja redirecionando antes de terminar de salvar, saca?

Minha sugestão seria tentar colocar esse push do router dentro de um then ou usar um await pra garantir que os commits no store tenham terminado antes de fazer o redirect. Tipo assim:

methods: {
  async salvar() {
    if (this.id) {
      await this.store.commit('ALTERA_PROJETO', {
        id: this.id,
        nome: this.nomeDoProjeto
      });
    } else {
      await this.store.commit('ADICIONA_PROJETO', this.nomeDoProjeto);
    }

    this.nomeDoProjeto = "";
    this.$router.push('/projetos');
  },
}

Dá uma testada e vê se resolve o problema. Se não for isso, pode ser bom dar uma olhada no console pra ver se tem algum erro sendo mostrado.

por Leonides Pires Oliveira Neto
| 169.8k xp | 40 posts
Analista de Sistema

Eu tenho essa suspeita também, mas o trecho de código acima é o que é descrito na aula, pois na aula dá certo mas fazendo não.

Dúvida o curso é antigo?

por Estudante
| 565.5k xp | 1338 posts

https://github.com/alura-cursos/alura-tracker/tree/aula-4 pelo o que vi aqui, dois anos atrás o repositório.

por Estudante
| 565.5k xp | 1338 posts

Tem esse curso que é mais novo https://cursos.alura.com.br/course/vue-3-componentes-diretivas-reatividade-framework, indicaria você fazer esse

solução!
por Leonides Pires Oliveira Neto
| 169.8k xp | 40 posts
Analista de Sistema

Mudei a lógica sugerida no curso. Coloquei um console log para saber o que estava vindo no this.id e verifiquei que toda vez que era adicionando um projeto this.id=='novo' pelo console log. Logo inveti e logica, segue abaixo a solução: 

methods: {
    salvar() {  
      if (this.id == 'novo') {
        console.log(this.id)
        this.store.commit('ADICIONA_PROJETO', this.nomeDoProjeto)
      } else {
        this.store.commit('ALTERA_PROJETO', {
          id: this.id,
          nome: this.nomeDoProjeto
        })
      }
      this.nomeDoProjeto = "";
      this.$router.push('/projetos')
    },
  },