Ich versuche, von berechnet auf ein Array zuzugreifen. Konsole vuex hat gezeigt, dass ein berechnetes Array vorhanden ist, aber ich kann von created () nicht auf das Array zugreifen. Jede Hilfe wird geschätzt!

Ich habe versucht, in einem Datenarray zu speichern, findet das berechnete Array nicht.

<template>
    <div>
        {{ product.product_name }}
    </div>
</template>

<script>
export default {
    name: 'product_4',
    created() {
        this.product = this.products.find((product) => product.id == 4);
    },
    data() {
        return {
            product: {}
        }
    },
    computed: {
        products() {
            return this.$store.getters.products;
        }
    }
}
</script>

Store.js

state: {
    products:[]
},
getters: {
    products(state) {
        return state.products;
    }
},
mutations: {
    updateGetProducts(state, payload) {
        state.products = payload;
    }
},
actions: {
    getProducts(context) {
        axios.get('/api/getproducts')
            .then((response)=> {
                context.commit('updateGetProducts', response.data);
            });
    }
}
-1
NewProgrammer 19 Jän. 2019 im 04:29

3 Antworten

Beste Antwort

Ich habe das berechnete dahingehend geändert:

computed: {
    product() {
        return this.$store.getters.products.find((product) => product.id == 4);
    }
}

Ich kann auf diese Weise direkt zugreifen und muss keine Daten eingeben, da dies in der Vue-Dokumentation nicht empfohlen wird.

0
NewProgrammer 19 Jän. 2019 im 09:05

computed -Eigenschaften werden nach dem created Lebenszyklus-Hook gemountet. Versuchen Sie daher, einen anderen Hook wie gemountet zu verwenden:

 mounted(){
      this.product = this.products.find((product) => product.id == 4);
    }
0
Boussadjra Brahim 19 Jän. 2019 im 01:32

Ich denke, sollte kein Problem machen, wenn Sie wie unten verwenden, aber Sie müssen sicherstellen, dass find-Methode ein einzelnes Objekt anstelle von null oder Array von Objekten zurückgibt.

 created() {
            this.product = this.$store.getters.products.find((product) => product.id == 4);
        }

Aber ich werde es vorziehen, das in einem montierten Hook wie unten zu verwenden, wenn Sie die berechnete Eigenschaft verwenden möchten.

mounted() {
        this.product = this.products.find((product) => product.id == 4);
    }

Und nachdem Sie Ihren aktualisierten Code überprüft haben, können Sie die folgende Lösung verwenden, da ich gesehen habe, dass Sie Aktionen zum Aktualisieren von Produkten mithilfe der API verwendet haben. Die folgende Lösung löst Ihr Problem

<template>
    <div>
        {{ product.product_name }}
    </div>
</template>

<script>
export default {
    name: 'product_4',
    data() {
        return {

        }
    },
    computed: {
        product() {
            return this.$store.getters.products.find((p) => p.id == 4);
        }
    }
}
</script>
0
Md Mahamudul Hasan 19 Jän. 2019 im 03:14