Question

我正在尝试从计算访问数组。控制台vuex显示了计算数组在那儿，但是我无法从created（）访问该数组。任何帮助表示赞赏！

我试图保存到数据数组中，但找不到计算所得的数组。

<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

computed属性是在created生命周期挂钩之后挂载的，因此，请尝试使用另一个类似mount的挂钩：

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

Answer 2

如果您使用如下所示的方法，我认为应该不会有任何问题，但是您必须确保find方法返回单个对象而不是null或对象数组。

 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 3

我将计算值更改为此：

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

我可以通过这种方式直接访问，不需要输入数据，因为在vue文档中不建议这样做。

无法访问数组对象

3 个答案: