Javascript 如何将vuejs阵列发送到另一个组件，而在路由到该组件时阵列数据不会丢失？

您好，我目前正在构建一个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>

{{products.name}R{{{products.price}
{{products.description}

添加到购物车

---

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

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

我也会为此推荐vuex，这可能是最好的选择。您可以使用sessionID并将会话的相关信息保存在vuex存储中，然后让您的不同组件读取特定会话所需的数据

---

但是，如果由于某种原因确实无法使用vuex，请看一下事件，下面是一个简单的方法，可以让两个组件通过事件进行通信

使用vuex，想象一下，在你做路由器之前，你设置了要存储的阵列数据，然后阵列被“保存”。。。 创建、安装新组件等后，您可以从存储访问阵列。

---

Vuex将在您进入路由器视图时保存您的数据。

我将如何以每个用户独有的方式执行此操作？因为我使用的是Laravel身份验证。或者Vuex是否自动处理不同的用户会话？Vuex对于每个用户都可能不同。我在Vue和Laravel中有电子商务解决方案，我在页面加载时调用API为购物车获取项目（它基于会话，所以基本Laravel身份验证），当用户向购物车添加项目时，我在vuex中调度操作，向API发送请求并将数据放入存储，我在FE和BE上有相同的数据，也可以在FE上访问。谢谢。如果我目前正在使用vuex。如果我刷新或以新用户身份登录，数据是否仍会保留在存储中？要在重新加载页面后使存储保持不变，您应该使用

vuex persistedstate

，如果需要更新存储，则需要重新设置新信息。