Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Como inserir um mixin dentro do setup

Estava refatorando a view "Tarefas.vue" e me deparei com uma dificuldade para inserir o mixin dentro do componente api setup(). Devria crar uma constante?? Aguardo retorno =)

...
 mixins: [notificacaoMixin],
 methods: {
         salvarTarefa(tarefa: ITarefa): void {
               if (!tarefa?.projeto) {
                //chamando um mixin
               this.notificar(TipoNotificacao.ATENCAO, 'Ops... :(', 'É necessário escolher um projeto!');
                return;
            }
           this.store.dispatch(CADASTRAR_TAREFA, tarefa)
        }

    },
    setup() {
        const store = useStore();
        const tarefaSelecionada = ref(null as ITarefa | null);
        
        store.dispatch(OBTER_PROJETOS)
        store.dispatch(OBTER_TAREFAS)

        // metodos
        
        
      const selecionarTarefa = (tarefa: ITarefa) => {
            tarefaSelecionada.value = tarefa;
        }
        
        const fecharModal= () => {
            tarefaSelecionada.value = null;
        }
        
       const  editandoTarefa = ()=>{
            store.dispatch(ALTERAR_TAREFA, tarefaSelecionada.value)
                .then(()=>fecharModal())
        }

        return {
            tarefas: computed(() => store.state.tarefa.tarefas),
            store,
            tarefaSelecionada,
            selecionarTarefa,
            fecharModal,
            editandoTarefa
        }
    }
1 resposta
solução!

Olá, Felipe! Tudo ok por aí?

Na verdade, a Composition API foi criada para resolver muitos dos problemas que os mixins apresentam, como conflitos de nomes e dificuldades de rastreamento de onde as propriedades estão vindo.

Por isso, a ideia é que, ao invés de usar mixins, você use funções comuns do JavaScript. No seu caso, você poderia criar uma função notificar fora do componente e importá-la no setup.

Segue um exemplo de como você poderia fazer isso:

// arquivo notificar.js
export function notificar(tipo, titulo, mensagem) {
    // implementação da notificação
}

// no seu componente
import { notificar } from './notificar.js';

export default {
    setup() {
        // ...

        const salvarTarefa = (tarefa) => {
            if (!tarefa?.projeto) {
                notificar(TipoNotificacao.ATENCAO, 'Ops... :(', 'É necessário escolher um projeto!');
                return;
            }
            store.dispatch(CADASTRAR_TAREFA, tarefa);
        }

        // ...
    }
}

Dessa forma, você consegue reutilizar a função notificar em vários componentes, da mesma forma que faria com um mixin, mas de uma forma mais clara e explícita.

Era isso!

Espero ter ajudado, abraços e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software