无法访问数组对象答案

【问题标题】：unable to access array objects无法访问数组对象
【发布时间】：2019-06-13 06:32:44
【问题描述】：

我正在尝试从计算访问数组。控制台 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);
            });
    }
}

【问题讨论】：

你有没有尝试安慰products？你确定有一个名为product_name的属性吗？
是的，它显示在 vuex 中，但在 computed() 产品下
请复制您的代码here 以便调试，您可以使用示例产品数组代替 axios 调用
它在 vue 代码和框中工作，唯一的区别是 axios 调用。 codesandbox.io/s/1v8ov5jr47
我也试过用相同的数组替换axios，同样的问题：计算的有数组但数据未定义。

标签： vue.js vuex

【解决方案1】：

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

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

【讨论】：

我的回答出了什么问题，因为有人来投反对票
结果还是一样，数据返回产品为未定义。不确定谁投了你的票。
请分享您的店铺对象

【解决方案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>

【讨论】：

尝试了第一种方法，挂载了，结果是一样的：未定义
查看 this.$store.getters.products 的内容，是否未定义？
在 html 模板中我做了一个
{{ product.product_name }}
它显示了所有产品。但我需要推出特定的产品。
在计算上它有来自我的 store.js 的数组，但在 created() 或 mount() 上是未定义的
然后只需检查您的 find 方法是否返回任何内容。 this.products.find((product) => product.id == 4)

【解决方案3】：

我将计算结果更改为：

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

这种方式可以直接访问，不需要放入数据，vue文档中不建议这样做。

【讨论】：