How to do it...

Add Vuex as a dependency to your project (the CDN address is https://unpkg.com/vuex). I will assume that you are using JSFiddle to follow along; otherwise, just remember to put Vue.use(Vuex) before the store code.

The sample application we will build is to broadcast notifications to the users of the website.

The HTML layout looks as shown:

<div id="app">  <div v-for="(message, index) in messages">     <p style="cursor:pointer">{{message}}      <span @click="close(index)">[x]</span>    </p>  </div>  <input v-model="newMessage" @keyUp.enter="broadcast">  <button @click="broadcast">Broadcast</button></div>

The idea is to have a textbox to write messages and the broadcasted messages will be displayed on the top with the most recent appearing ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.