Day 9 of Vue.js

Have been revising for the finals recently…

Shared State

We can define a single source of truth for multiple Vue instances if we want shared states among them.

let store = {
    user: {
        name: "john"
    }
}

And in each Vue instance, we can refer to that single source of truth in data using the shared keyword.

new Vue({
    el: '#one',
    data: {
        foo: 'bar',
        shared: store
    }
});


new Vue({
    el: '#two',
    data: {
        foo: 'another bar',
        shared: store
    }
});

Of course we can specify data foo that are not shared between these 2 instances differently.

In DOM we just use shared.user.name to refer to the shared data.

<div class="notification is-primary" id="one">
        <p>shared</p>
        <h1 class="title is-1">{{ shared.user.name }}</h1>
        <p>private</p>
        <h2 class="title is-3">{{ foo }}</h2>
    </div>

Leave a Reply

Your email address will not be published. Required fields are marked *