当我路由到另一个组件时，如何在不丢失数组数据的情况下将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存储中，然后让您的不同组件读取特定会话所需的数据。

但是，如果您出于某种原因真的不能使用vuex来查看事件，这里有一个简单的教程，介绍如何使两个组件通过事件进行通信。

Answer 3

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