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

Question

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

我尝试了一些方法，但似乎没有任何效果。我尝试在路由器中传递 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

查看 this非常好的文章，涉及独立组件之间的通信。这也是对 Flux 思维方式的介绍 Vuex .一般来说，您应该可以使用共享存储实例，从单独的文件中将每个组件导入它，并通过分配给每个组件的数据使其具有反应性。

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

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

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