[PROMOÇÃO] Assine com + 30% de desconto ANUAL MENSAL (últimas horas)
Felipe Silva
Criador Felipe Silva 16/10/2020

Bom dia!
Estou com uma dúvida referente ao Laravel + Vuex.
No meu código, realizo o carregamento dos dados conforme o curso que foi ensinado de Vuex do Chat.

Minha dúvida é a seguinte: Para utilizar o gráfico apexcharts, tenho que declarar o array dentro de data() e não posso criá-lo no computed para carregar os dados, pois, é apresentado um erro que já foi criado.

Tentei fazer o carregamento dos dados no método mounted da forma a seguir:

this.dados = this.$store.state.financeiro.dados
Obs.: (financeiro é o módulo)

Porém, não obtive resultado.

Ao mostrar no console.log dessa forma "this.$store.state.financeiro.dados", não aparece nenhum registro. Isso porque no action quando imprimo a variável response.data no console, os dados aparecem normalmente.

Obs.: Todos os exemplos do gráfico apexcharts os valores são definidos manualmente no array direto no arquivo ".vue".

Criador Felipe Silva 16/10/2020

Arquivo.vue
export default {

    data() {

        return {
            dados: [],

            options: {


                chart: {

                    type: 'candlestick',
                    events: {

                        mounted: function(chartContext, config){
                            chartContext.windowResizeHandler();
                        }
                    }
                },
    
                xaxis: {
                    type: 'datetime',
                    labels: {
                        datetimeUTC: false
                    }
                },
    
                yaxis: {
                    tooltip: {
                        enabled: true
                    }
                }
            }
        }

    },

    created() {
        this.loadDados();
    },

    methods: {
        loadDados() {
            this.loading = true;
            this.$store.dispatch("loadDados")
                             .finally( () => this.loading = false );
        }
    }

}

MODULO (financeiro.js)
export default {

    state: {
        dados: []
    },

    mutations: {
        LOAD_DADOS (state, dados) {
            state.dados = dados
        }
    },

    actions: {
        loadDados ( context ) {
            return axios.get('url_get_dados')
                                .then( response => context.commit( 'LOAD_DADOS', response.data ) )
        }
    }
}

Felipe Silva
Manager Carlos Ferreira 16/10/2020

Olá, Felipe!
Tudo bem?

Por que não usa o gráfico semelhante ao que fizemos nesse curso aqui? Acho mais simples essa implementação: https://academy.especializati.com.br/curso/laravel-graficos

Carlos Ferreira
Criador Felipe Silva 16/10/2020

Bom dia Carlos!

Respondendo sua pergunta... Eu não utilizo os gráficos que me sugeriu porque não tem o tipo que preciso (candlestick).
Te adicionei no repositório com o meu projeto, porém, não adicionei todas as pastas.

Caso seja necessário, só me avisar.

Obrigado!

Repositório: https://github.com/feliperesilva/apexcharts/

Felipe Silva
Manager Carlos Ferreira 16/10/2020

Olá, Felipe!

Como a sua dúvida é algo bem particular, vou te pedir que envie um e-mail para [email protected] (com o número do ticket: 1293) e combine um horário, aí vou baixar o seu projeto, testar ele e te dá um feedback na data e horário marcado.

Aguardo o seu contato amigo.

Carlos Ferreira
Criador Felipe Silva 16/10/2020

Bom dia!

Consegui solucionar este problema.
Continuei carregando os dados no computed(), porém de outra forma.

ERRADO:

candles() {
    return this.$store.state.financeiro.candles
}

 

CORRETO:

candles() {
return new Array( this.$store.state.financeiro.candles )
}
Felipe Silva
Manager Carlos Ferreira 16/10/2020

Olá, Felipe!

Parabéns meu amigo.

Abs;

Carlos Ferreira
Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!