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

Question

So I'm trying to wrap my head around how to use the vue-loader for Webpack, vue-router for routes, and how to have a shared data model. My understanding is that you create a data model, and then pass it into each component with the idea that they have a shared state. It also seems that you should use the data model rather than props, as that allows for two-way binding.

I've tried a few things but nothing seems to work. I tried passing the data through in the router, but that doesn't fix it.

I have this as my main 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');

And this as my first.vue:

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

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

Any ideas? Thanks!

require('vue!./second.vue'); Mind to explain what it does? I mean the part before the dot. — Yauheni Prakopchyk
– Yauheni Prakopchyk, Commented Jan 5, 2016 at 11:55
@YauheniPrakopchyk I assume thats how you require things using webpack. — notANerdDev
– notANerdDev, Commented Jan 5, 2016 at 13:48
@notANerdDev is correct - it forces webpack to load the file using vue-loader. — greggilbert
– greggilbert, Commented Jan 5, 2016 at 19:26

zxzak · Accepted Answer · 2016-01-05 15:29:52Z

3

Check out this very good article which deals with communication between independent components. It is also an introduction to the Flux way of thinking with Vuex. Generally speaking you should be ok with a shared store instance, where you import it it every component from a separate file and make it reactive by assigning to each component's data.

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

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

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

edited Jan 5, 2016 at 15:29

answered Jan 5, 2016 at 15:18

zxzak

9,4945 gold badges30 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

greggilbert Over a year ago

Thanks! That article is really helpful, and Vuex seems to be very promising.

notANerdDev · Accepted Answer · 2016-01-05 10:56:00Z

1

Custom data fields that are sent through are not accessed like component data fields. You are trying {{ msg }}, this would look for a msg field in your component.

To access the data sent via router,

{{ $route.data }}

Now, since in your case, data is in turn json, you would do

{{ $route.data.msg }}

answered Jan 5, 2016 at 10:56

notANerdDev

1,28611 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related