Vue.js 2 Cookbook

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 ...