如何使用 webpack 在 Vue.js 中的路由组件之间共享数据？

Question

所以我正在努力思考如何将 vue-loader 用于 Webpack，将 vue-router 用于路由，以及如何使用共享数据模型。我的理解是，您创建一个数据模型，然后将其传递给每个组件，并认为它们具有共享状态。似乎您应该使用数据模型而不是 props，因为它允许双向绑定。

我尝试了一些方法，但似乎没有任何效果。我尝试在路由器中传递 data，但这并不能解决问题。

我主要用这个app.js:

var $ = require('jquery'),
    Vue = require('vue'),
    VueRouter = require('vue-router');

Vue.use(VueRouter);

var first = require('vue!./first.vue');
var second = require('vue!./second.vue');

var sourceOfTruth = {
    msg: "my message"
};

var App = new Vue({
  data: sourceOfTruth,
});

var router = new VueRouter({
    history: true
});

router.map({
    '/foo': {
        data: sourceOfTruth,
        component: first
    },
    '/bar': {
        data: sourceOfTruth,
        component: second
    }
});

router.start(App, '#app');

这是我的 first.vue:

<template>
    The message goes here -> {{ msg }}
</template>

<script type="text/javascript">
    // ???
</script>

有什么想法吗？谢谢！

Answer 1

通过发送的自定义数据字段不像组件数据字段那样被访问。您正在尝试 {{ msg }}，这将在您的组件中查找 msg 字段。

要访问通过路由器发送的数据，

{{ $route.data }}

现在，因为在你的情况下，数据依次 json，你会做

{{ $route.data.msg }}

Answer 2

查看 this very good article which deals with communication between independent components. It is also an introduction to the Flux way of thinking with Vuex。一般来说，您应该可以使用共享存储实例，从单独的文件中将每个组件导入它，并通过分配给每个组件的数据使其具有反应性。

<template>
    {{ sourceOfTruth.msg }}
</template>

<script>
    import store from '../store'

    export default {
       data () {
          return {
            sourceOfTruth : store.sourceOfTruth 
         }
      } 
   }
</script>

如何使用 webpack 在 Vue.js 中的路由组件之间共享数据？

How to share data across routed components in Vue.js using webpack?

vue.js