Vue.js динамические компоненты - данные для передачи

Question

Я новичок в Vue.js. Я следил за учебником здесь - https://coligo.io/dynamic-components-in-vuejs/ - на динамических компонентах, чтобы дать мне динамический макет, который мне понравился, для перечисления продуктов и предоставления пользователю возможности переключаться на просмотр, когда они нажимают на один из продуктов в таблице. Итак, у меня есть компонент «список-продукты» и компонент «edit-product», и какой из них отображается, зависит от состояния «currentView» в главном экземпляре Vue.

<div id="content"> 
    <keep-alive> 
    <component :is="currentView"></component> 
    </keep-alive> 
</div> 

Переключение работает нормально, когда currentView изменен. То, что я не понял, - это то, как лучше передать информацию о продукте в компонент редактирования, чтобы он попадал в данные. Я полагаю, что список и компоненты редактирования - это два родственных компонента основного экземпляра Vue, созданных одновременно. Что мне нужно сделать, когда я нажимаю на строку в таблице листинга, используйте объект продукта, используемый для создания этой строки, доступной для компонента редактирования. Я не уверен, как я это делаю (по крайней мере, по правильному пути Vue). Когда отображаемый компонент переключается (через изменение в «currentView»), какое-то событие вызвано для нового (повторно) отображаемого компонента? Если это так, я мог бы предположительно назвать какую-то функцию?

LATER: Я определил, что «активированный» крюк вызывается, когда я переключаюсь на компонент edit-product, который, я думаю, должен каким-то образом использовать. Теперь, чтобы понять это.

Answer 1

Для этого вы можете использовать Vuex. Vuex - это управляющая потоком система управления Vue.

Ваше приложение в основном имеет два разных состояния: (1) продукт не выбран (list-products) и (2) любой выбранный продукт (edit-product). Когда это моделируется с помощью Vuex, идея состоит в том, чтобы сохранить выбранный продукт в так называемом магазине и позволить компонентам определять их внутреннее состояние в зависимости от состояния хранилища. Вот пример:

Создать магазин, чтобы сохранить состояние приложения:

выбор продукта

const store = new Vuex.Store({ 
    state: { 
     selectedProduct: null 
    }, 
    getters: { 
     selectedProduct: state => state.selectedProduct 
    }, 
    mutations: { 
     selectProduct: (state, data) => state.selectedProduct = data 
    } 
}); 

Ручка в вашем list-products компонента:

methods: { 
    selectProduct(product) { 
     this.$store.commit('selectProduct', product); 
    } 
} 

Показать текущий продукт в edit-product:

Vue.component('edit-product', { 
    store, 
    template: '<div>{{selectedProduct.name}}</div>', 
    computed: Vuex.mapGetters(['selectedProduct']) 
}); 

И, наконец, переключите компоненты depe nding о состоянии:

new Vue({ 
    el: '#app', 
    store, 
    computed: Object.assign(Vuex.mapGetters(['selectedProduct']), { 
     currentView() { 
      return this.selectedProduct ? 'edit-product' : 'list-products' 
     } 
    }) 
}); 

Вот основной рабочий JSFiddle.