невозможно получить доступ к объектам массива

Question

Я пытаюсь получить доступ к массиву из вычисленных.Консоль vuex показала, что вычисляемый массив существует, но я не могу получить доступ к массиву с помощью create ().Любая помощь приветствуется!

Я пытался сохранить в массив данных, не находит вычисляемый массив.

<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);
            });
    }
}

Answer 1

Я думаю, не должно возникнуть никаких проблем, если вы используете, как показано ниже, но вы должны убедиться, что метод find возвращает один объект вместо нуля или массива объектов.

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

, но я предпочтуиспользовать это в смонтированном хуке, как показано ниже, когда вы хотите использовать вычисляемое свойство.

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

И после просмотра обновленного кода вы можете использовать приведенное ниже решение, потому что я видел, что вы использовали действия для обновления продуктов с использованиемAPI, поэтому решение ниже будет решить вашу проблему

<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>

Answer 2

Я изменил вычисленный на это:

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

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

Answer 3

Свойства

computed монтируются после хука жизненного цикла created, поэтому попробуйте использовать другой хук, такой как смонтированный:

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