Я хотел бы отделить бизнес-логику и шаблон компонента. В React я бы использовал шаблон « Контейнер / Презентация» .

const Container = (props) ={amp}gt; {amp}lt;Presentational ...props/{amp}gt; 

Но что эквивалентно с vue.js ?

Скажем, у меня есть все это в одном компоненте (не тестировал этот, это только для примера):

 {amp}lt;template{amp}gt; {amp}lt;div id="app"{amp}gt; {amp}lt;div v-for="user in users"{amp}gt; {{user.name}} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; Vue.component({ el: '#app', props: { filter: "foo" }, data: { users: [], }, ready: function () { this.$http.get('/path/to/end-point?filter=' this.props.filter) .then(function (response) { this.users = response.data }) } }) {amp}lt;/script{amp}gt; 

Как я могу извлечь контейнер с помощью логики выборки?

Вы можете расширить любой компонент Vue, что позволит вам переопределить любые методы из родительского. Итак, вы можете создать базовый компонент, а затем расширить его:

 const Base = Vue.component('base-comp', { template: "#base", data() { return { name: 'foo' } } }); const Child = Base.extend({ data() { return { name: 'bar' } } }); Vue.component('child-comp', Child) 

Вы можете проверить JSFiddle здесь: https://jsfiddle.net/tdgxdhz9/

Если вы используете отдельные файловые компоненты, то это просто случай импорта базового компонента и его расширения, что сохраняет исходный шаблон в такте:

 import Base from './BaseComponent.vue' Base.extend({ // Javascript code here }) 

Я действительно не вижу необходимости в компоненте контейнера. Абстрагируйте ваш код извлечения в действие vuex и свяжите состояние вашего хранилища внутри компонента, используя вычисляемые свойства.

То, что вы ищете, это Vue Mixins. Вы можете написать файл mixins, содержащий вашу бизнес-логику, и импортировать его в ваши компоненты Vue.

Ссылка: — https://vuejs.org/v2/guide/mixins.html

Вы можете использовать vuex-connect для создания контейнерных компонентов, как в React. Вот пример проекта: https://github.com/pocka/vue-container-component-example