Modularize vuex store

Signed-off-by: Hosub Lee <spyrr83@gmail.com>

conf/default.conf

@@ -22,7 +22,9 @@ server {
     add_header Cache-Control "public, must-revalidate, proxy-revalidate";
   }
 
-  location /api {
-    proxy_pass http://localhost/api;
+  # For api server (backend)
+  location /api/ {
+    rewrite ^/api^/ /$1 break;
+    proxy_pass http://backend:18888/api/;
   }
-}
+}

docker-compose.yml

@@ -6,4 +6,4 @@ services:
     build:
       context: .
     ports:
-      - 80:80
+      - 88:80

src/components/layout/Sidebar.vue

@@ -44,7 +44,7 @@
 </style>
 
 <script>
-import { mapGetters, } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
   name: "sidebar",
@@ -69,27 +69,26 @@ export default {
     }
   },
   methods: {
+    ...mapActions('book', [
+      'newBook', 'updateBook', 'reset', 'setSidebar', 'closeSidebar'
+    ]),
     btnUpdateBook() {
-      let sidebar = this.$store.getters.sidebar
+      let sidebar = this.sidebar
       let book = {id: sidebar.id, title: sidebar.title, author: sidebar.author}
 
       if(sidebar.caption === 'Add') {
-        this.$store.dispatch('newBook', book)
+        this.newBook(book)
       } else if(sidebar.caption === 'Update') {
-        this.$store.dispatch('updateBook', book)
+        this.updateBook(book)
       }
-      this.$store.dispatch('closeSidebar')
+      this.closeSidebar()
     },
   },
   computed: {
-    ...mapGetters({
+    ...mapGetters('book', {
       isOpen: 'sidebarState',
       sidebar: 'sidebar',
     }),
   },
-  created () {
-    this.forms[0].vmodel = ''
-    this.forms[1].vmodel = ''
-  },
 }
 </script>

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import { store } from './controllers/Store'
+import store from './store'
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
 import 'bootstrap/dist/css/bootstrap.css'

src/store/book.js

@@ -0,0 +1,89 @@
+import axios from 'axios'
+
+const API_ADDR = 'http://localhost/api/v1'
+
+const state = {
+  books: [{
+    // <id> : {
+    //   title: <title>,
+    //   author: <author>,
+    //   isActive: <true or false>
+    // }
+  }],
+  sidebar: {
+    isOpen: false,
+    id: '',
+    title: '',
+    author: '',
+    caption: 'New',
+  },
+}
+
+const mutations = {
+  setBooks: function (state, books) {
+    state.books = books
+  },
+  openSidebar: function (state) {
+    state.sidebar.isOpen = true
+  },
+  closeSidebar: function (state) {
+    state.sidebar.isOpen = false
+  },
+  setSidebar: function (state, book) {
+    state.sidebar = {
+      ...state.sidebar,
+      ...book
+    }
+  }
+}
+
+const getters = {
+  book: function (state, id) {
+    return state.books[id]
+  },
+  allBooks: function (state) {
+    return state.books
+  },
+  sidebar: function (state) {
+    return state.sidebar
+  },
+  sidebarState: function (state) {
+    return state.sidebar.isOpen
+  }
+}
+
+const actions = {
+  newBook: async function (context, book) {
+    await axios.post(`${API_ADDR}/books`, {
+      title: book.title, author: book.author
+    })
+    context.dispatch('reset')
+  },
+  updateBook: async function (context, book) {
+    await axios.put(`${API_ADDR}/books/${book.id}`, {
+      title: book.title, author: book.author
+    })
+    context.dispatch('reset')
+  },
+  reset: async function (context) {
+    const res = await axios.get(`${API_ADDR}/books`)
+    context.commit('setBooks', res.data)
+  },
+  setSidebar: function (context, book) {
+    context.commit('setSidebar', book)
+  },
+  openSidebar: function (context) {
+    context.commit('openSidebar')
+  },
+  closeSidebar: function (context) {
+    context.commit('closeSidebar')
+  },
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}

src/store/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import BookStore from './book'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    book: BookStore
+  }
+})

src/views/Books.vue

@@ -18,7 +18,7 @@
 </style>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
   data() {
@@ -31,22 +31,23 @@ export default {
     }
   },
   methods: {
+    ...mapActions('book', [
+      'reset', 'setSidebar', 'openSidebar', 'closeSidebar'
+    ]),
     btnViewDetails(book) {
-      this.$store.dispatch('setSidebar', {...book, caption: 'Update'})
-      this.$store.dispatch('openSidebar')
+      this.setSidebar({...book, caption: 'Update'})
+      this.openSidebar()
     },
     btnNewBook() {
-      this.$store.dispatch('setSidebar', {
-        id: 'New book', title: '', author: '', caption: 'Add'
-      })
-      this.$store.dispatch('openSidebar')
+      this.setSidebar({id: 'New book', title: '', author: '', caption: 'Add'})
+      this.openSidebar()
     }
   },
-  computed: mapGetters({
+  computed: mapGetters('book', {
     books: 'allBooks'
   }),
   created () {
-    this.$store.dispatch('reset')
+    this.reset()
   },
 }
 </script>