Vue + Vuex 没有从状态中获取值答案

【问题标题】：Vue + Vuex not getting values from stateVue + Vuex 没有从状态中获取值
【发布时间】：2021-02-10 03:03:27
【问题描述】：

这是我第一次使用 Vuex。我在 $store.state 中有我的 2 个数组，一个带有 cart[] 空数组，另一个带有内部课程参数的 Lessons[]它。

我安慰记录了它，它成功地将新课程添加到购物车 $store.state.cart.join() 给了我这个输出： [{"lessonID":1003,"lessonTitle":"Lessons","lessonActivity":"English","lessonLocation":"Kensington","lessonPrice":"80","lessonAvailability":5}]

那么我怎样才能在另一个组件中获取这些信息呢？我试过这样做：

<div class="col-7 bg-secondary" v-for="(lesson, id) in $store.state.cart" :key="lesson.id">
                <div class="card" >
                    <img :src="$store.state.cart.url" alt="" class="card-img-top img-fluid">
                    <div class="card-body">
                        <h3 class="card-title">{{ $store.state.cart[id].Title }}</h3>
                        <ul class="list-group list-group-flush">
                        <li class="list-group-item">Subject: {{ $store.state.cart.Activity }} </li>
                        <li class="list-group-item">Location: {{ $store.state.cart.Location }} </li>
                        <li class="list-group-item">Price: {{ $store.state.cart.Price }} </li>
                        <li class="list-group-item text-danger">Availability: {{ $store.state.cart.Availability }} </li>
                        </ul>
                    </div>

但不幸的是，没有显示任何内容，也没有显示任何错误。只是为了确认我没有在计算属性中添加任何内容或在 <script> 标记中添加任何内容。请帮助我：/

【问题讨论】：

如果您在<script> 中没有任何内容，您如何期望在<template> 中定义$store？相关文档here。注意 Vuex 也有非常视频，对初学者特别有用。但你确实需要一点 JavaScript。

标签： javascript arrays vue.js object vuex

【解决方案1】：

所以@catmal，有点正确，但我只需要显示不是 $store.state.cart.Activity
但使用@catmal 解释，然后按照我定义的方式编写参数

 computed: {
            cart() {
                return this.$store.state.cart;
            }
        }

然后 <div class="col-7 bg-secondary" v-for="car in cart"> <p>asd {{ car.lessonID }} </p> 这是错误的，因为我试图显示 car.id 例如（它在我的 store.js 中是这样定义的

感谢您的帮助

【讨论】：

【解决方案2】：

你注意到你的外层<div>没有关闭吗？

<div class="col-7 bg-secondary" v-for="(lesson, id) in $store.state.cart" :key="lesson.id">
                <div class="card" >
                    <img :src="$store.state.cart.url" alt="" class="card-img-top img-fluid">
                    <div class="card-body">
                        <h3 class="card-title">{{ $store.state.cart[id].Title }}</h3>
                        <ul class="list-group list-group-flush">
                        <li class="list-group-item">Subject: {{ $store.state.cart.Activity }} </li>
                        <li class="list-group-item">Location: {{ $store.state.cart.Location }} </li>
                        <li class="list-group-item">Price: {{ $store.state.cart.Price }} </li>
                        <li class="list-group-item text-danger">Availability: {{ $store.state.cart.Availability }} </li>
                        </ul>
                    </div>
</div>

【讨论】：

我刚刚复制了解决此问题所需的信息

【解决方案3】：

假设$store.state.cart.join() 是正确的并返回您所说的，数组中的单个对象，您可以添加一个计算属性：

<script>
export default {
    computed: {
      lesson() {
      return $store.state.cart.join()[0]
    }
}
</script>

然后在你的模板中不需要 v-for 但你需要：

<h3 class="card-title">{{ lesson.Title }}</h3>

再一次，我没有在返回的数组中看到 Title 属性，但我认为它是正确的，因为提供的代码。

【讨论】：

我遵循了 youtube 上的一个教程，它和你一样，只是没有 join()。因为我用 join() 做了新变量，只是为了看看我是否真的检索了关于我添加到“购物车”数组中的信息。不幸的是，我不知道为什么它没有向我显示任何东西......这就是计算的样子：{ cart() { return this.$store.state.cart; }} 并且在模板中我只是试图做 {{ cart.Activity }} 例如，没有任何东西，没有错误，只是空白......
好的，所以我需要做的是写下我是如何插入数组的。就像我做的那样： courseID: this.$store.state.Lessons[index].id 所以在数组中我需要显示的不是cart.id，而是cart.lessonID