Question

我刚刚开始在Vue上发现了关于多页面应用程序架构的问题，我无法在任何地方找到答案。

我正在构建一个基于umbraco cms的Web应用程序，并且只有各个页面上的部分代码都是vue代码。在它们之间，还有很多正常的cms输出，它不是通过vue渲染的，例如：

          <div class="description">
            @Html.Raw(Model.Description)
        </div>
        <div class="specifications product-onpage-link">
            <a href="#description" class="first-link" onclick="event.preventDefault(); productScroll('#description')">Se varebeskrivelsen</a> <a href="#specifications" onclick="event.preventDefault(); productScroll('#specifications')">Se tekniske specifikationer</a>
        </div>

        @Html.Partial("~/Views/Partials/Webshop/Products/Variant.cshtml", Model)

        @{
            var amountvalues = Model.StockInfo != null && Model.StockInfo.AmountValues != null ? Json.Encode(Model.StockInfo.AmountValues) : "";
        }

        <div id="add-to-basket" class="variant box rounded-borders">
            <add-to-basket amountplaceholder="@Umbraco.GetDictionaryValue("Products: amount name")" id="@Model.ItemNo" orderminimum="@Model.StockInfo.OrderMinimum" amountvalues="@amountvalues" placeholder="@Umbraco.GetDictionaryValue("Products: Add to basket button name")" nicename="@Model.StockInfo.Stock.NiceName" delivery="@Model.StockInfo.DeliveryTime" orderinterval="@(Model.StockInfo.OrderInterval == 0 ? 1 : Model.StockInfo.OrderInterval)" />
        </div>
    </div>

在这部分中，它只是通过vue呈现的元素。

我的问题是如何构建vue代码，当同一页面上有许多vue实例，其间有很多常规的cms渲染代码。

我的vue代码入口点是

import productComponent from './product-overview';
import BuyButton from './shared/buy-button';

Vue.component('buy-button', BuyButton);

new Vue({
    el: '#add-to-basket'
});

new Vue({
    el: '.buytogether'
});

...

这里我实际上生成了很多vue实例。我在想，必须有一个更简单的方法。

我无法处理组件之间具有父/子关系的一个vue-app中的所有vue代码，因为它们遍布页面，其间有很多常规html，由服务器呈现。

我担心的是，当我创建几个vue实例时，我会失去性能。

希望您对如何构建代码有一些好主意。

Answer 1

我很确定最好的方法是拥有一个vue intance。如果关系不是太复杂，可以通过道具处理，如果是，则可以使用vuex。

虽然您没有单页应用，但除非您使用会话，本地存储或数据库，否则不会在页面之间共享状态。

Vue 2.0 on multipage app

1 个答案: