如何重构模板变体和共享方法

Question

我们有几种不同的方式来呈现 post（例如，整页、模态视图、折叠视图、编辑模式等）它们共享许多方法。我们将所有这些变体作为模板保存在 Post.vue 中，并传递上下文属性以使用 v-if:

有条件地呈现某个变体

<single-post
  :post="currPost"
  :canEditPost="canEditPost"
  :targetPageUrl="targetPageUrl"
  :mailToLink="mailToLink"
  :onAddComment="addComment"
  :onDeleteComment="deleteComment"
  :onShowMoreComments="showMoreComments"
  :onShowFewerComments="showFewerComments"
  :onGoToPost="goToPost"
  v-if="context === 'feed'"
/>

<post-full
  :post="currPost"
  :canEditPost="canEditPost"
  :targetPageUrl="targetPageUrl"
  :mailToLink="mailToLink"
  :postImage="postImage"
  :units="units"
  :divisionsByType="divisionsByType"
  v-if="context === 'permalink'"
/>

(many more versions)

那么Post.vue中还有这样的方法：

deletePost: function(){
  BootBox.confirm("Are you sure you want to delete this post?", (confirmed) => {
    if (confirmed) {
      API.deletePost(this.currPost, (err) => {
        if (!err){
          this.currPost.status = 'deleted';
        }
      });
    }
  });
},

如何重构它以使其更优雅、更简洁？

对我来说这似乎超级冗长（太多的道具）。我一直在为此寻找 vue 或 vuex 模式。

Answer 1

我觉得v-bind是你这里的朋友，还有<component>，有一个PostModel

创建一个 PostModel 来预定义您的可重用 post 的所有功能和属性：

export default {
    post: {},
    canEditPost: function() {},
    targetPageUrl: '',
    //...
}

然后导入您的 SinglePost（或任何您需要的）以及 PostModel

import SinglePost from '/path/to/SinglePost';
import PostModel from './path/to/PostModel';

export default {

    data() {
        return {
            thePostComponent: SinglePost,
            postProps: Object.assign({}, PostModel, {
                post: post,
                canEditPost: canEditPost,
                targetPageUrl: targetPageUrl
            }
        }
    }
}

上面的想法是，您正在使用给定 post 的任何自定义配置覆盖对象，但您不需要不断地在组件自身上定义属性，创建一个更自我的对象-包含且可重用的组件。如果您从 API 传递这些属性，您甚至可以更轻松地集成它，通过使用 Interceptor 模式将您的模型映射到 API.

最后，动态显示该组件：

For a reusable component:

<component :is="thePostComponent" v-bind="postProps">

希望这对您有所帮助

如何重构模板变体和共享方法

How to refactor for template variations & shared methods

design-patterns

vue.js

vuejs2

vuex