VueJS 与多页 Rails 6 应用程序与 Turbolinks - 布局

Posted 2023-02-22

【中文标题】VueJS 与多页 Rails 6 应用程序与 Turbolinks - 布局

【英文标题】：VueJS With Multi-Page Rails 6 App With Turbolinks - Layout

【发布时间】：2021-07-21 04:25:51

【问题描述】：

我有一个具体的问题，我正在努力在网上查找相关信息。我已经使用 webpacker 成功地将 VueJS 安装到我的 Rails 6 应用程序中，并且在我的应用程序布局文件上注册了一个根组件：

<!-- application.html.erb -->
<!-- javascript pack tags loaded in head and my app component displays the template properly -->
<div id="vue-app-root">
    <app></app>
</div>

我知道，在单页应用程序中，VueJS 应用程序会在访问网站时进行一次初始化，然后发出异步请求并由 VueJS 发起视图/模板更改——这一切都是有道理的。我的问题是关于 vue 应用程序初始化应该如何与多页应用程序一起工作。

应用程序是否在每次重新加载/turbolink 加载时完全初始化？如果我只是在各个页面中到处使用一些组件，我是否坚持让整个 VueJS 应用程序在每个页面加载时初始化，然后再初始化这些组件？如果是这样，我应该让 Vue JS 应用在 application.html.erb 中的 body 标记（或根元素）上初始化，还是应该让应用只在包含组件的页面上初始化？

【参考方案1】：

您需要找出导致路由的原因 - Vue 还是 Rails？

如果是 Rails，那么是的，Vue 应用程序需要在每次页面加载时重新安装。这适用于您是否使用 Turbo/Turbolinks，只要 Vue 应用程序在获取的部分中。如果获取的部分在 Vue 容器之外并且您使用 Turbo/Turbolinks，则不会重新加载 Vue 应用程序。即使对于客户端渲染的 Vue 渲染服务器也是如此。

如果是 Vue 做路由，Rails 可能不会做，否则 Vue 应用总是会重新加载。

【讨论】：

我只是想添加一个评论，当我玩这个时，我学到了一些好东西。尽管与问题没有直接关系，但值得注意的是，将 Vue 应用程序包装在 layout.html.erb 文件中的某个位置意味着所有加载到 yield 的视图都将由 Vue 处理。这导致我使用的一些 JQuery 插件完全失败，因此我必须在我想使用它的地方专门初始化我的 Vue 应用程序。

我已经进入了一个阶段，我用 Vue JS 插件替换了所有 Jquery 对象，并在 layout.html.erb 中有一个根 vue 应用程序。现在，无论我想在哪里添加一段 Vue JS 逻辑或组件，我都可以添加它，并且它会正确呈现它。目前最大的挑战是维护 vue 组件的状态，因为它不是一个具有路由功能的成熟 vue 应用程序。

@karns 您想在同一页面上或跨页面维护跨组件的状态吗？

同一页面上的组件。如果页面重新加载服务器端请求，我将不得不从新的 VueJS 状态开始，我可以接受这样的限制。

【参考方案2】：

对于@sjaustirni 的回答，我要补充一点，这取决于您是否要使用 Rails 集成路由，您可以拆分 2 个代码库。我的意思是：如果你只使用 Rails 作为 API 而不是路由，你应该把 Vue 项目放在它自己的 repo 中，而不是混合使用两者。

当然，如果您使用的是 Rails 的路由，将两者放在同一个地方是有意义的。

另外，我想分享vue-turbolinks 的存在，这可能对您有用，尤其是在使用 Hotwire 时。 这是一个解释它的视频：https://gorails.com/episodes/how-to-use-vuejs-and-turbolinks-together