VueJS передает данные между двумя страницами

Question

Существует так много вариантов передачи данных между страницами. Я хочу сделать то же самое, когда вы нажимаете на название продукта https://crisgon.github.io/vue-cart/dist/?ref=madewithvuejs.com#/

Можете ли вы сказать мне, как правильно передать объект JSON на другую страницу?

• Должен ли я использовать Vuex?
• Стоит ли отправлять событие на автобусе?
• Должен ли я использовать LocalStorage?
• Должен ли я передать идентификатор в параметре GET маршрута, а затем вызвать API для получения моих данных?

Я так растерялся ...

Answer 1

Я думаю, что ты слишком обдумал это.Из того, что я вижу на примере, который вы разместили, расширенное представление продукта содержит почти те же данные, что и представление сетки.Когда пользователь нажимает на продукт, он выбирает новый путь в приложении, где представлены подробные сведения о конкретном продукте.

Существует множество способов достижения этого, и я не думаю, что вам нужноуправление состоянием, чтобы сделать это вообще.

Мой предпочтительный вариант - использовать обратный вызов в компоненте списка, который срабатывает, если пользователь нажимает на название продукта.Обратный вызов обновит состояние родительского компонента, который затем может скрыть список и представить подробный вид продукта.Каждому компоненту элемента списка может быть присвоен идентификатор продукта в качестве реквизита, который затем передается обратно в обратном вызове.Так что это может выглядеть примерно так:

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.

Надеюсь, это поможет.

Answer 2

Сайт - это SPA, когда вы нажимаете на элемент, страница не перезагружается, поэтому решение с параметром GET - не то, которое использовали парни. Скорее всего, они использовали https://router.vuejs.org/, чтобы сделать эту работу. Вам решать, хотите ли вы использовать vuex или просто обычный объект, который вы импортируете в компонент. Просто знайте, что вам не нужно передавать его между страницами, как вы говорите. Изучите детали продукта с помощью инструментов разработчика, и вы получите представление об этом. Вероятно, существует компонент ProductBox, которому нужен путь для изображения, заголовка и т. Д. Я бы сохранил эти переменные в хранилище vuex и заставил этот компонент использовать их в качестве вычисляемых свойств, но это зависит от вас. Также учтите, что это демонстрационная версия и что в реальном магазине количество товаров, вероятно, будет намного больше, и что ProductBox покажет детали, которые еще не загружены в стартовом представлении. Тогда ваше решение с запросом API является правильным, чтобы сохранить его как SPA, вы должны вызывать его с помощью ajax. Мой выбор для этого https://www.npmjs.com/package/axios Надеюсь, это помогло.