Vue + Vuex 沒有從狀態中獲取值

Question

這是我第一次使用 Vuex。 我在$store.state 中有 2 個數組，一個帶有car []空數組，另一個帶有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>標簽中添加任何內容。 請幫我 ：/

Answer 1

假設$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 屬性，但我認為鑒於提供的代碼是正確的。

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

Answer 3

所以@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 中是這樣定義的

謝謝您的幫助