javascript - 相当于 Vue.js 中的 React 容器和展示组件

Question

我想将组件的业务逻辑和模板分开。在 React 中，我会使用 Container/Presentation 模式。

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

但是 vue.js 的等价物是什么？

说我把这一切都放在一个组件中(没有测试这个，只是为了举例):

<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>

如何仅使用获取逻辑提取容器？

Answer 1

我真的没有看到需要容器组件。将您的获取代码抽象为一个 vuex 操作，并使用计算属性将您的商店状态绑定(bind)到组件中。