Equivalent of a React container and presentational component in Vue.js

Viewed 931

I would like to separate the business logic and the template of a component. In React I would use the Container/Presentation pattern.

const Container = (props) => <Presentational ...props/> 

But what is the equivalent with vue.js?

Say I have this all in one component (did not test this one, it just for example) :

<template>
  <div id="app">
    <div v-for="user in users">
      {{user.name}}
    </div>
  </div>
</template>

<script>
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
         })
  }
})
</script>

How I could extract a container with just the fetch logic?

4 Answers

I really don't see a need for a container component. Abstract your fetch code out into a vuex action and bind your store state within the component using computed properties.

Related