Kami memiliki beberapa cara berbeda untuk merender postingan (misalnya, halaman penuh, tampilan modal, tampilan yang diciutkan, mode edit, dll.) Banyak metode dibagikan di antara mereka. Kami menyimpan semua variasi ini sebagai templat di dalam Post.vue dan meneruskan prop konteks untuk merender yang tertentu secara kondisional menggunakan 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)

Lalu ada metode di Post.vue seperti ini:

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';
        }
      });
    }
  });
},

Bagaimana saya bisa refactor ini menjadi lebih elegan dan kurang bertele-tele?

Bagi saya ini tampaknya super verbose (terlalu banyak alat peraga). Saya telah mencari pola vue atau vuex untuk ini.

0
Kyle 3 Januari 2018, 02:44

1 menjawab

Jawaban Terbaik

Saya pikir v-bind adalah teman Anda di sini, dan <component>, dengan PostModel

Buat PostModel yang menetapkan semua fungsi dan properti dari postingan Anda yang dapat digunakan kembali:

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

Kemudian impor SinglePost Anda (atau mana pun yang Anda butuhkan) bersama dengan 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
            }
        }
    }
}

Gagasan di atas adalah bahwa Anda menimpa objek dengan konfigurasi khusus apa pun untuk kiriman tertentu, tetapi Anda tidak perlu terus-menerus menentukan properti pada komponen itu sendiri, membuat komponen yang lebih mandiri dan dapat digunakan kembali. Jika Anda meneruskan properti ini dari, katakanlah, API, Anda bahkan bisa lebih mudah mengintegrasikan ini untuk membuatnya lebih rata dan dapat digunakan kembali dengan menggunakan pola Interceptor untuk memetakan model Anda ke API.

Dan akhirnya, tampilkan komponen itu secara dinamis:

For a reusable component:

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

Semoga ini membantu

2
Ohgodwhy 3 Januari 2018, 00:23