more store

Author: arcadeJHS

README.md

@@ -1238,6 +1238,105 @@ And delete all files and code related to the original component. Our Angular app
 See `tag-07-es6-components`.
 
 
+Bonus #2: free Vue components from Angular services
+----
+Now we have got a store we can move on and strip `searchService` of unnecessary parts.   
+For example, the `store.currentDetail` property and the `selectItem(id)` method are exclusively used by the `detail` Vue component. Let's move them from the Angular service to the Vuex store.   
+
+Comment (or delete) the following lines:
+
+**ngVueBridgeCode/services/searchService.js**
+```javascript
+export class SearchService {
+    constructor($timeout, VuexStore) {
+        /* ... */
+        this.store = {
+            searching: false,
+            searchParam: '',
+            searchResults: []
+            //, currentDetail: null
+        };
+        /* ... */
+    }
+
+    /*
+    selectItem(id) {
+        this.store.currentDetail = this.store.searchResults.find(function (r) {
+            return r.id === id;
+        });
+    }
+    */
+
+    query (searchParam) {
+        /* ... */
+        // this.store.currentDetail = null;
+        /* ... */
+    }
+};
+```
+
+And modify the store:
+
+**vueCode/store.js**
+```javascript
+export default new Vuex.Store({
+    state: {
+        /* ... */
+        selectedDetailId: null
+    },
+    actions: {
+        getResults: (store, searchParam) => {
+            return new Promise((resolve, reject) => {
+                /* ... */
+
+                setTimeout(() => {
+                    store.commit('setSelectedDetail', null);
+                    store.commit('setResults', results);
+                    resolve(results);
+                }, 2000);
+            });
+        },
+        /* ... */
+        selectItem: (store, id) => { 
+            store.commit('setSelectedDetail', id);
+        }
+    },
+    mutations: {
+        /* ... */
+        setSelectedDetail: (state, id) => { 
+            state.selectedDetailId = id;
+        }
+    },
+    getters: {
+        /* ... */
+        currentDetail: state => state.results.find(r => r.id === state.selectedDetailId)
+    }
+});
+```
+
+Lastly, rewrite the component to use the store in place of the service:
+
+**vueCode/components/Detail/index.vue**
+```javascript
+export default {
+    /* ... */
+    computed: {
+        currentDetail () {
+            return this.$store.getters['currentDetail'];
+        }
+    },
+    methods: {
+        getDetail (detailId) {
+            this.$store.dispatch('selectItem', Number(detailId));
+        },
+        /* ... */
+    },
+    /* ... */
+};
+```
+
+Sure, you can probably do the same with the `store.searchResults` property. Our Angular app is reducing to its bare bones.   
+Refer to `tag-08-more-store`.