Question

有很多选择可以在页面之间传递数据。当您单击标题产品https://crisgon.github.io/vue-cart/dist/?ref=madewithvuejs.com#/

时，我也想做同样的事情

您能告诉我将JSON对象传递到另一页的好方法是什么吗？

我应该使用Vuex吗？
我应该发出公交事件吗？
我应该使用LocalStorage吗？
我应该在路由GET参数中传递ID，然后调用API来检索我的数据吗？

我很困惑...

Answer 1

该站点是SPA，当您单击某个项目时，该页面不会重新加载，因此，使用GET参数的解决方案不是这些人使用的解决方案。他们很可能使用https://router.vuejs.org/来完成这项工作。是否要使用vuex还是仅导入组件中的普通对象取决于您。请注意，您不需要像说的那样在页面之间传递。使用开发人员工具检查产品详细信息，然后您将对它有所了解。可能有一个ProductBox组件需要图片，标题等的路径。我会将这些变量存储在vuex存储中，并使该组件将它们用作计算属性，但这取决于您。还要考虑这是一个演示，并且在现实生活中的商店中产品数量可能会很多，并且ProductBox将显示尚未加载到开始视图中的详细信息。那么，使用API请求的解决方案就是正确的选择，为了使其成为SPA，您必须通过ajax对其进行调用。我的选择是https://www.npmjs.com/package/axios 希望能有所帮助。

Answer 2

我认为您正在考虑这个问题。从您发布的示例中可以看到，产品的扩展视图包含的数据与网格视图几乎相同。当用户点击某个产品时，他们会在应用中采用新路线，其中会显示特定的产品详细信息。

您可以通过多种方法来实现这一目标，我认为您根本不需要状态管理来完成它。

我的首选选项是在列表项组件中使用回调，如果用户单击产品标题，则会触发该回调。回调将更新父组件的状态，该父组件然后可以隐藏列表并显示产品的详细视图。可以给每个列表项组件一个商品ID作为道具，然后将其传递回回调中。所以看起来可能像这样：

For each list item:
<div class="title" onClick={productSelected(this.props.id)} > . 
     {this.props.productTitle}
</div>

When rendering the list:
<ul>
      { this.props.productIds.map((productId) => {
           return (
               <ListItem 
                   onSelected={this.props.productSelected}
                   id={productId}
               </ListItem>
           )
      {

In the parent component:

constructor(props) {
    super(props) 
    this.state = {
        selectedProductId: ""
    }

    this.productSelected = this.productSelected.bind(this)
}

this.productSelected(selectedProductId) {
    this.setState({selectedProductId})
}

...

render() {
     <div>
          { (this.state.selectedProductId !== "") ?
                 return ( <ListComponent 
                           productIds={[ ... ]} 
                           productSelected={this.productSelected}
                          >
                         )
            : return ( <DetailedProductOverview 
                         productId={this.state.selectedProductId}
                       >
                     )
          }
     </div>
}

....

*请注意，这不应该是有效的代码，而只是解决方案的提示

因此，想法是父组件将根据selectedProductId状态变量是否具有值来有条件地呈现列表或详细视图。

希望有帮助。

VueJS在两个页面之间传递数据

2 个答案: