Added vuex as a store and an event bus.

assets/js/api/book.js

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+export default {
+    booksFetch(searchTitle) {
+        return axios.get('/api/books', {
+            params: {title: searchTitle},
+            headers: {'accept': 'application/json'}
+        })
+    }
+}

assets/js/book.js

@@ -2,9 +2,10 @@ import Vue from 'vue';
 import Book from './pages/book'
 import BookListing from './pages/booklisting'
 import BookListingHeader from './pages/booklistingheader'
+import store from "./store/index";
 
 Vue.component('Book', Book);
 Vue.component('BookListing', BookListing);
 Vue.component('BookListingHeader', BookListingHeader);
 
-new Vue().$mount('#app');
+new Vue({store}).$mount('#app');

assets/js/pages/booklisting.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <input type="text" v-model="searchTerm" @keydown.enter="search"/>
+    <input type="text" class="form-control" v-model="searchTerm" @keydown.enter="search"/>
     <table class="table">
       <thead>
       <tr>
@@ -39,27 +39,28 @@
 </template>
 
 <script>
-import axios from 'axios';
+import {mapActions, mapState} from "vuex";
 
 export default {
   name: 'BookListing',
   data() {
     return {
       searchTerm: null,
-      books: [],
       selectedBook: null,
       manualMode: false
     }
   },
+  computed: {
+    ...mapState('booksmodule', ['books']),
+  },
   methods: {
+    ...mapActions('booksmodule', [
+      'findAll'
+    ]),
     search: function () {
+      this.$store.commit('increment')
       this.updateHistory();
-      axios.get('/api/books', {
+      this.findAll(this.searchTerm);
-        params: {title: this.searchTerm},
-        headers: {'accept': 'application/json'}
-      }).then(response => {
-        this.books = response.data;
-      }).finally(() => window.EventBus.$emit('updateBookListingHeader', {searchTerm: this.searchTerm}));
     },
     updateHistory: function () {
       if (history.pushState) {

assets/js/pages/booklistingheader.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <h1 v-if="searchTerm" v-html="'Book search: '+searchTerm"></h1>
+    <h1 v-if="searchTitle" v-html="'Book search: '+searchTitle"></h1>
     <h1 v-else>Book list</h1>
   </div>
 </template>
 
 <script>
-import {EventBus} from "../event-bus";
+import {mapState} from "vuex";
 
 export default {
   name: 'BookListingHeader',
@@ -15,14 +15,8 @@ export default {
       searchTerm: null,
     }
   },
-  created() {
+  computed: {
-    window.EventBus.$on('updateBookListingHeader', (data) => {
+    ...mapState('booksmodule', ['searchTitle']),
-      this.searchTerm = data.searchTerm;
-    });
   },
-  mounted() {
-    const urlParams = new URLSearchParams(window.location.search);
-    this.searchTerm = urlParams.get('search') || "";
-  }
 }
 </script>

assets/js/store/index.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import booksmodule from './modules/books';
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        count: 0
+    },
+    mutations: {
+        increment(state) {
+            state.count++
+        }
+    },
+    modules:{
+        booksmodule
+    }
+})
+

assets/js/store/modules/books.js

@@ -0,0 +1,65 @@
+import BookApi from "../../api/book";
+
+const
+    FETCHING_BOOKS = "FETCHING_BOOKS",
+    FETCHING_BOOKS_SUCCESS = "FETCHING_BOOKS_SUCCESS",
+    FETCHING_BOOKS_ERROR = "FETCHING_BOOKS_ERROR";
+
+export default {
+    namespaced: true,
+    state: {
+        isLoading: false,
+        error: null,
+        books: [],
+        searchTitle: null
+    },
+    getters: {
+        isLoading(state) {
+            return state.isLoading;
+        },
+        hasError(state) {
+            return state.error !== null;
+        },
+        error(state) {
+            return state.error;
+        },
+        hasBooks(state) {
+            return state.books.length > 0;
+        },
+        books(state) {
+            return state.books;
+        }
+    },
+    mutations: {
+        [FETCHING_BOOKS](state) {
+            state.isLoading = true;
+            state.error = null;
+            state.books = [];
+        },
+        [FETCHING_BOOKS_SUCCESS](state, books) {
+            state.isLoading = false;
+            state.error = null;
+            state.books = books;
+        },
+        [FETCHING_BOOKS_ERROR](state, error) {
+            state.isLoading = false;
+            state.error = error;
+            state.books = [];
+        }
+    },
+    actions: {
+        async findAll({commit, state}, searchTitle) {
+            commit(FETCHING_BOOKS);
+            try {
+                state.searchTitle = searchTitle;
+                console.info(state.searchTitle);
+                let response = await BookApi.booksFetch(state.searchTitle);
+                commit(FETCHING_BOOKS_SUCCESS, response.data);
+                return response.data;
+            } catch (error) {
+                commit(FETCHING_BOOKS_ERROR, error);
+                return null;
+            }
+        }
+    }
+};

package.json

@@ -27,6 +27,7 @@
     "dependencies": {
         "@popperjs/core": "^2.11.5",
         "bootstrap": "^5.1.3",
-        "popper": "^1.0.1"
+        "popper": "^1.0.1",
+        "vuex": "^3"
     }
 }

yarn.lock

@@ -7431,6 +7431,11 @@ vue@^2.5:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
 
+vuex@^3:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+
 watchpack@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25"