added vuex store for books

booker/app.py

@@ -4,6 +4,25 @@ from flask_cors import CORS
 # config
 DEBUG = True
 
+BOOKS = [
+    {
+        'title': 'On the Road',
+        'author': 'Jack Kerouac',
+        'read': True
+    },
+    {
+        'title': 'Harry Potter and the Philosopher\'s Stone',
+        'author': 'J. K. Rowling',
+        'read': False
+    },
+    {
+        'title': 'Green Eggs and Ham',
+        'author': 'Dr. Seuss',
+        'read': True
+    }
+]
+
+
 # app init
 app = Flask(__name__)
 app.config.from_object(__name__)
@@ -18,5 +37,13 @@ def ping_route():
     return jsonify('You pass butter')
 
 
+@app.route('/books', methods=['GET'])
+def all_books():
+    return jsonify({
+        'status': 'success',
+        'books': BOOKS
+    })
+
+
 if __name__ == '__main__':
     app.run()

client/src/App.vue

@@ -2,7 +2,8 @@
   <div id="app">
     <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/about">About</router-link> |
+      <router-link to="/ping">Ping</router-link>
     </div>
     <router-view/>
   </div>

client/src/app.service.js

@@ -0,0 +1,41 @@
+import axios from 'axios'
+
+axios.defaults.baseURL = 'http://localhost:5000'
+
+// To avoid adding the token to every request we make to a service we can
+// instead use an interceptor
+axios.interceptors.request.use(function (config) {
+  // added for when the code is running on a server for serverside rendering
+  if (typeof window === 'undefined') {
+    return config
+  }
+  const token = window.localStorage.getItem('token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+
+  return config
+})
+
+const appService = {
+   getPing() {
+    return new Promise((resolve) => {
+        axios.get('/ping')
+            .then(response => {
+                resolve(response.data)
+            })
+            .catch(error => {alert(error)})
+    })
+   },
+   getAllBooks() {
+        return new Promise((resolve) => {
+            axios.get('/books')
+                .then(response => {
+                    resolve(response.data)
+                })
+                .catch(error => {alert(error)})
+        })
+   }
+}
+
+export default appService

client/src/components/Books.vue

@@ -17,18 +17,52 @@
                     </tr>
                     </thead>
                     <tbody>
-                        <tr>
+                    <tr v-for="(book, index) in books" :key="index">
-                            <td>foo</td>
+                        <td>{{ book.title }}</td>
-                            <td>bar</td>
+                        <td>{{ book.author }}</td>
-                            <td>foobar</td>
+                        <td>
-                            <td>
+                            <span v-if="book.read">Yes</span>
-                                <button type="button" class="btn btn-warning btn-sm">Update</button>
+                            <span v-else>No</span>
-                                <button type="button" class="btn btn-danger btn-sm">Delete</button>
+                        </td>
-                            </td>
+                        <td>
-                        </tr>
+                            <button type="button" class="btn btn-warning btn-sm">Update</button>
+                            <button type="button" class="btn btn-danger btn-sm">Delete</button>
+                        </td>
+                    </tr>
                     </tbody>
                 </table>
             </div>
         </div>
     </div>
-</template>
+</template>
+
+<style scoped lang="scss">
+    .btn {
+    margin-right: 10px;
+    }
+</style>
+
+<script>
+// this.$store.dispatch('LOAD_BOOKS_LIST') on created so we can be sure our books list is up to date
+import { mapState, mapActions} from 'vuex'
+
+export default {
+    name: 'Books',
+    data() {
+        return {
+            newBook: ''
+        }
+    },
+    methods:{
+        ...mapActions(['LOAD_BOOKS_LIST'])
+    },
+    computed:{
+        ...mapState(['books'])
+    },
+    created() {
+        //this.$store.dispatch('
+        this.LOAD_BOOKS_LIST()
+    }
+}
+
+</script>

client/src/components/Ping.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-    import axios from 'axios';
+    import appService from '../app.service.js'
 
     export default {
     name: 'Ping',
@@ -16,10 +16,9 @@
     },
     methods: {
         getMessage() {
-            const path = 'http://localhost:5000/ping';
+            appService.getPing()
-            axios.get(path)
+                .then(data => {this.msg = data})
-                .then((res) => {this.msg = res.data})
+                .catch(error => {this.msg = error})
-                .catch((error) => { console.log(error)})
         }
     },
     created() {

client/src/store.js

@@ -1,3 +1,4 @@
+import appService from './app.service.js'
 import Vue from 'vue'
 import Vuex from 'vuex'
 
@@ -5,12 +6,25 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-
+    books: []
+  },
+  getters: {
   },
-  mutations: {
 
+  mutations: {
+    SET_BOOK_LIST: (state, books) => {
+        state.books = books
+    }
   },
   actions: {
+    LOAD_BOOKS_LIST({commit}) {
+        return new Promise((resolve, reject) => {
+            appService.getAllBooks().
+                then((data) => { commit('SET_BOOK_LIST', data.books)})
+                resolve()
+        }
 
+        )
+    }
   }
 })