当我路由到该组件时，如何将 vuejs 数组发送到另一个组件而不丢失数组数据？

Question

你好，我目前正在构建一个 vuejs 购物车，对于我点击的每个产品，我都点击我将该特定项目推送到一个名为购物车数据的对象数组中，如下所示

  methods: {

    addProduct: function(product){


          this.cartdata.push({
            id: product.id,
            name: product.name,
            price: product.price,
            description: product.description


          })


    }
  }

此代码是触发 addProduct 函数的按钮出现的地方

 <div class="card-body" v-for="(products, index) in filteredProducts">
                <div class="card card-default" >


                    <div class="card-body">
                      <h2 style="padding:0px;">{{products.name}}   R{{products.price}}  </h2>

                      <p>{{products.description}}</p>
                      <button type="submit" v-on:click="addProduct (products)" class="btn btn-danger">
                          Add to cart
                      </button>
                    </div>
                </div>

我有另一个名为 CartComponent 的组件，我想发送这个数组，以便我可以在路由到 CartComponent 时显示它并保留数据。我该怎么做？

Answer 1

最好的方法是使用 Vuex。您将在一个商店中存储数据，并且可以轻松地跨组件重用数据。

Answer 2

为此我也推荐 vuex，这可能是最好的方式。您可以拥有一个 sessionID 并将有关会话的相关信息保存在 vuex-store 中，然后让您的不同组件读取特定会话所需的数据。

但如果您出于某种原因确实不能使用 vuex，请查看事件，这里有一个简单的 tutorial 如何让两个组件通过事件进行通信。

Answer 3

使用 vuex，想象一下，在你做一个 router.push 之前，你设置要存储的数组数据，然后数组是 "saved"... 当创建、安装新组件等时。您可以从商店访问您的阵列。当您进入路由器视图时，Vuex 将保存您的数据。

当我路由到该组件时，如何将 vuejs 数组发送到另一个组件而不丢失数组数据？

How to send vuejs array to another component without the array data being lost when i route to that component?

javascript

arrays

shopping-cart

persist

vue.js