如何将概率和项目一起存储到详细信息页面？

问题描述

我使用Vue Cli和VUex。我有一个小型网上商店，当用户单击产品时，它会带到产品详细信息页面。是的，我可以通过routerlink传递问题，这很好。我的问题是我不知道如何显示所选产品的详细信息。我将这些详细信息存储在Vuex main.js中，可以获取产品列表的详细信息，但不能获取详细信息列表。我试图将ID放置在任何地方，但无法正常工作。非常感谢您的帮助！

产品列表：

   <div class="Item">
       <router-link :to="`details/${item.id}`">
          <div class="image">
           <img :src=item.image width="200">
           <p class="item-name">{{item.name}}</p>
           <p class="item-price">${{item.price}}</p>
       </div>
    </router-link>
       <div class="button-container">
           <div id="ItemAddButton">
               <button @click="addToCart(item)">Add To Cart</button>
           </div>
       </div>
   </div>
</template>

Store.js:
export default new Vuex.Store({
  state: {
    items: [
        {
            id: 1,name: 'Product A',price: 10,image: A
        },{
            id: 2,name: 'Product B',price: 20,image: M
        },Router/index.js:
{
      path: '/webshop/details/:id',name: 'Details',component: Details
    },Product details page: (its almost the same because I need the same functionality)
<template>
   <div class="Item">
        <router-link :to="`webshop/`">
         </router-link>
         <shopping-cart :cart="shoppingCart"></shopping-cart>
          <div v-if="item.id" class="image">
           <img :src=item.image width="200">
           <p class="item-name">{{item.name}}</p>
           <p class="item-price">${{item.price}}</p>
       </div>

       <div class="button-container">
           <div id="ItemAddButton">
               <button @click="addToCart(item)">Add To Cart</button>
           </div>

       </div>


   </div>
</template>

<script>
import ShoppingCart from './webshop/shoppingCart.vue'

    export default {
        name: 'item',props: ['id'],data() {
            return {
                size: ''
            }
        },components: {
    ShoppingCart
  },computed: {
      shoppingCart() {
          return this.$store.state.cart
      },products() {
          return this.$store.state.items
      },totalAmount() {
          return this.$store.getters.total
      }
  },methods: {
            addToCart(item) {
                    this.$store.commit({
                        type: 'addToCart',id: item.id,shoe: item.name,size: this.size,price: item.price
                    })
            }
        }
    }
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）