Какой рисунок предпочитаете использовать при объединении Laravel и Vuejs

Question

Как я знаю, есть 2 способа использования Vuejs: inline-template и component.

# 1. Инлайн-шаблон

Я собираюсь использовать код из серии Давайте создадим форум с Laravel и TDD , чтобы выразить свою точку зрения.

ThreadsController:

public function show($channel, Thread $thread, Trending $trending)
    {
        if (auth()->check()) {
            auth()->user()->read($thread);
        }

        $trending->push($thread);

        $thread->increment('visits');

        return view('threads.show', compact('thread'));
    }

Просмотр (threads.show)

@extends('layouts.app')

@section('head')
    <link rel="stylesheet" href="/css/vendor/jquery.atwho.css">
@endsection

@section('content')
    <thread-view :thread="{{ $thread }}" inline-template>
        <div class="container">
            <div class="row">
                <div class="col-md-8" v-cloak>
                    @include ('threads._question')

                    <replies @added="repliesCount++" @removed="repliesCount--"></replies>
                </div>

                <div class="col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <p>
                                This thread was published {{ $thread->created_at->diffForHumans() }} by
                                <a href="#">{{ $thread->creator->name }}</a>, and currently
                                has <span
                                        v-text="repliesCount"></span> {{ str_plural('comment', $thread->replies_count) }}
                                .
                            </p>

                            <p>
                                <subscribe-button :active="{{ json_encode($thread->isSubscribedTo) }}" v-if="signedIn"></subscribe-button>

                                <button class="btn btn-default"
                                        v-if="authorize('isAdmin')"
                                        @click="toggleLock"
                                        v-text="locked ? 'Unlock' : 'Lock'"></button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </thread-view>
@endsection

И компонент ThreadView не содержит тег <template></template>.

Тейлор по-прежнему использует лезвие по умолчанию и просто импортирует компонент Vuejs при необходимости.

# 2. Компонент: То же, что и выше, но все содержимое будет отображено в теге <template></template>.

Какой путь мне лучше использовать в моем проекте? Я не вижу преимуществ и недостатков обоих способов. Единственное, что я могу видеть, если я использую inline-шаблон, я могу заблаговременно воспользоваться вспомогательной или блейд-директивой Laravel Collection (@auth, @guest).

Answer 1

Я думаю, это зависит от сложности вашего интерфейса, который вы намереваетесь реализовать.Лично я использую Vuejs со всеми его возможностями в качестве внешнего интерфейса моего приложения.В этом случае вы можете использовать Vue Router для более плавного преобразования между вашими страницами, а также Vuex в качестве управления хранилищем на вашем уровне веб-интерфейса.

Подводя итог, если вы хотите реализовать SPA (одностраничное приложение), выберите второй способ.Но если вы хотите просто использовать ограниченные возможности Vuejs, продолжайте в первую очередь.