Vue функции вычисленных свойств никогда не вызываются - PullRequest
Новая
       31

Vue функции вычисленных свойств никогда не вызываются

0 голосов
/ 02 августа 2020

Edit: я редактирую вопрос, потому что я исправил некоторые проблемы, я знаю, в чем моя настоящая проблема.

Я пытаюсь сделать свой собственный Google Science Journal , но веб-версия с MQTT протокол, но в моем коде так много ошибок.

Некоторые пояснения по поводу моего кода:

  • google.charts.load вызывается в родительском компоненте, затем обратный вызов вызывает дочерний компонент
  • time props - это интервал, меняющийся между true и false каждую секунду для сбора данных.
  • Мне нужно наблюдать за изменениями данных с несколькими зависимостями.

как работает мой код?

  1. При создании нового экземпляра появляется пустая диаграмма Google
  2. На диаграмме начинают отображаться данные каждую секунду.
  3. Название диаграммы изменяется при выборе новой вкладки и стирании данных диаграммы.

В этом коде есть проблема, это порядок, в котором вызываются функции (возникают некоторые проблемы с диаграммой Google), но я исправил это, переместив функции от вычисляемых до методов и вызова по порядку.

Я просто хочу знать, почему эти вычисляемые функции не работают, я имею в виду, они никогда не вызывают. 

<template>
    <v-card>
        <v-tabs
        v-model="active_tab"
        background-color="red lighten-2"
        dark
        show-arrows
        >
            <v-tab
            v-for="(n) in tabs"
            :key="n.id"
            >
                {{n.text}}
                <v-icon>{{n.icon}}</v-icon>
            </v-tab>
        </v-tabs>
        <div ref="char_div"></div>
    </v-card>
</template>

<script>
import debounce from 'debounce'

export default {
    name: 'charts',
    props:{
        time: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            chart: null,
            options: null,
            value: 0,
            previus: null,
            data: null,
            tabs: [
                {id: 0, text: "Aceleración lineal", unit: "(m/s&sup2;)", icon: ""},
                {id: 1, text: "Aceleración en x", unit: "(m/s&sup2;)", icon: ""},
                {id: 2, text: "Aceleración en y", unit: "(m/s&sup2;)", icon: ""},
                {id: 3, text: "Aceleración en z", unit: "(m/s&sup2;)", icon: ""},
                {id: 4, text: "Velocidad lineal", unit: "(m/s)", icon: ""},
                {id: 5, text: "Luz ambiental", unit: "(lux)", icon: ""},
                {id: 6, text: "Intensidad sonora", unit: "(dB)", icon: ""},
                {id: 7, text: "Tono", unit: "(Hz)", icon: ""},
                {id: 8, text: "Barómetro", unit: "(hPa)", icon: ""},
                {id: 9, text: "Brujula", unit: "grados", icon: ""},
                {id: 10, text: "Magnetómetro", unit: "&micro;T", icon: ""},
                {id: 11, text: "Humedad", unit: "%", icon: ""},
                {id: 12, text: "Temperatura ambiente", unit: "&deg;C", icon: ""}
            ],
            active_tab: 0
        }
    },
    computed: {
        newData: function(){
            switch (this.active_tab) {
                case 0:
                    this.value = Math.sqrt(this.$state.lin_acel.x^2 + this.$state.lin_acel.y^2 + this.$state.lin_acel.z^2)
                    break
                case 1:
                    this.value = this.$state.lin_acel.x
                    break
                case 2:
                    this.value = this.$state.lin_acel.y
                    break
                case 3:
                    this.value = this.$state.lin_acel.z
                    break
                case 4:
                    if (this.previus != null){
                        //var cons = Math.sqrt(this.$state.lin_acel.x^2 + this.$state.lin_acel.y^2 + this.$state.lin_acel.z^2)
                        var ax = this.$state.lin_acel.x,
                            ay = this.$state.lin_acel.y,
                            az = this.$state.lin_acel.z

                        var nuevo = Date.now()

                        var vx = ax * ((nuevo - this.previus)/1000),
                            vy = ay * ((nuevo - this.previus)/1000),
                            vz = az * ((nuevo - this.previus)/1000)

                        //this.value += (cons)*((nuevo - this.previus)/1000)
                        this.value += Math.sqrt(vx^2 + vy^2 + vz^2)
                        this.previus = nuevo
                    }else{
                        this.value = Math.sqrt(this.$state.lin_acel.x^2 + this.$state.lin_acel.y^2 + this.$state.lin_acel.z^2)
                        this.previus = Date.now()
                    }
                case 5:
                    this.value = this.$state.lux
                    break
                case 6:
                    this.value = this.$state.noise
                    break
                case 7:
                    this.value = this.$state.noise
                    break
                case 8:
                    this.value = this.$state.presion
                    break
                case 9:
                    var vector = Math.sqrt(this.$state.magneto.x^2 + this.$state.magneto.y^2 + this.$state.magneto.z^2)
                    break
                case 10:
                    this.value = Math.sqrt(this.$state.magneto.x^2 + this.$state.magneto.y^2 + this.$state.magneto.z^2)
                    break
                default:
                    this.value = 0
                    break
            }
        },
        newOptions(){
            console.log("new options")
            this.options = {
                tittle: this.tabs[this.active_tab].text,
                crosshair: {orientation: 'vertical', trigger: 'both'},
                legend: 'none',
                hAxis: {
                    format:'mm:ss'
                    }
            }
        },
        drawchart(){
            console.log("chart is drawing")
            this.chart.draw(this.data, google.charts.Line.convertOptions(this.options));
        },
    },
    watch: {
        time: {
            immediate: false,
            handler(){
                this.addData()
            }
        },
        active_tab: {
            inmediate: false,
            handler(){
                this.updatetable()
            }
        }
    },
    methods: {
        addData(){
            this.data.addRows([[new Date(Date.now()),0]])
        },
        updatetable(){
            this.data = null
            this.data = new google.visualization.DataTable(
                {cols:
                    [{label: 'tiempo', id: 'x', type: 'date'},
                    {label: String(this.tabs[this.active_tab].text), id: 'y', type: 'number'}]})
        }
    },
    mounted() {
        this.chart = new google.charts.Line(this.$refs.char_div)
        this.newOptions
        this.updatetable()
        this.drawchart
    }
}
</script>

<style>

</style>

1 Ответ

0 голосов
/ 07 августа 2020

Спасибо Филу и его помощь, я отвечу на свой вопрос.

Как говорит Фил, вычисляемые функции свойств не предназначены для изменения каких-либо свойств data и должны иметь return значение. Потому что вычисленные часы меняются только взамен, например: 

//Computed watch this
return this.a + this.b
//{...}
//Not this
this.c = this.a + this.b

Я нашел здесь и на Vue форумах способы улучшить этот код: Если вам нужно просмотреть данные с несколькими зависимостями, вы можете сделать следующее 

computed: {
    multi(){
        return [this.a, this.b].join()
    }
},
watch: {
    multi: {
        handler(): {
            this.c = this.a + this.b
        }
    }
}

Я лучшее, что я могу найти решение было: 

created(){
    this.$watch(
        (this) => (vm.x, vm.y, vm.z, Date.now()),
        function () {
            // Executes if `x`, `y`, or `z` have changed.
        }
    )
}

Это последнее также возвращает функцию unwatch(), оно останавливает свойство наблюдателя, если я сделаю this.watcher = this.$watch(/*data and callback here*/), тогда я могу this.watcher() остановить наблюдателя и сделать новый, идеально для улучшения работы этого кода.

...