ruby-on-rails - Rails Vuejs Webpacker:传递实例变量数据

我正在尝试学习如何使用通过Webpacker gem生成的带有Vuejs的Rails 5.1构建应用程序。

$ rails new myvueapp --webpack=vue

如何在Vue组件之间来回传递实例变量数据，以使数据进入数据库或从数据库中取出？

例如，假设我有一个带有用户名和电子邮件字段的用户模型。是否有一个简单的示例，说明如何将实例变量@user数据从 Controller 传递到组件？

我相信有两种方法可以做到这一点:

(1)在 Controller 中，具有render :json => @user，然后使用诸如访存API或Axios之类的东西来检索.vue组件中的数据。

-要么-

(2)在 View 中使用示例<%= javascript_pack_tag 'hello_vue' %>和<%= content_tag ... %>之类的东西。

当我执行此<%= javascript_pack_tag 'hello_vue' %>示例时，可以看到“Hello Vue!”。从组件“message”变量中的数据中获取数据，但是很难找到实例变量数据的示例，例如:@user数据，传入和传出Rails。

如何传递@user数据的任何示例将不胜感激。

谢谢。

最佳答案

我做了一些有效的工作，但我却不太喜欢:在window范围内创建一个方法，例如:

// app/javascript/packs/some_app.js

window.someAppPack = function (var1, var2) {
  // ...
  new Vue({
    // ...
    data () {
      return {
        var1,
        var2,
      }
    }
    // ...
  })
}

在Rails模板中:

<%= javascript_pack_tag 'somePack' %>

<script>
  someAppPack(#{raw @var1.to_json}, #{raw @var2.to_json})
</script>

这对我来说似乎很脏，我想知道这样做的好处:

Vue应用程序应该是可响应的，因此数据可能会在某个时间进行更新，并且将调用JSON资源。这使得传递原始数据毫无意义。

如果Vue仅用于使页面的某些部分具有反应性，那么当我们可以在标准Rails管道中使用“内联” Vue时，为什么要使用所有webpack内容？