more store

Author: arcadeJHS

README.md

@@ -1234,10 +1234,109 @@ import Search from '@/ngVueBridgeCode/components/Search/index.js';
 ngVueComponentsModule.component('search', Search);
 ```
 
-And delete all files and code related to the original component. Our Angular app is reducing to its bare bones.   
-See `tag-07-es6-components`.
+And delete all files and code related to the original component.     
+Refer to `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`.
 
 
 

code/vueApp/dist/js/appVueLib.js

@@ -5,8 +5,7 @@ export class SearchService {
 		this.store = {
 			searching: false,
 			searchParam: '',
-			searchResults: [],
-			currentDetail: null
+			searchResults: []
 		};
 		this.VuexStore = VuexStore;
 	}
@@ -20,17 +19,10 @@ export class SearchService {
 		this.store.searching = false;
 	}
 
-	selectItem (id) {
-		this.store.currentDetail = this.store.searchResults.find(function (r) {
-			return r.id === id;
-		});
-	}
-
 	query (searchParam) {
 		this.store.searching = true;
 		this.store.searchParam = searchParam;
 		this.store.searchResults = [];
-		this.store.currentDetail = null;
 		return this.executeQuery(searchParam).then(this.resolveQuery.bind(this));
 	}
 };

code/vueApp/dist/js/appVueLib_NgVueBridge.js

@@ -14,19 +14,16 @@
 </template>
 
 <script>
-import { searchService } from '@/ngVueBridgeCode/ngVueComponentsModule';
-
 export default {
 	name: "Detail",
-	data() {
-		return {
-			currentDetail: null
-		}
-	},
+	computed: {
+    	currentDetail () {
+      		return this.$store.getters['currentDetail'];
+    	}
+  	},
 	methods: {
 		getDetail (detailId) {
-			searchService.selectItem(Number(detailId));
-			this.currentDetail = searchService.store.currentDetail;
+			this.$store.dispatch('selectItem', Number(detailId));
 		},
 		addResult () {
 			this.$store.dispatch('addResult', { 
@@ -38,9 +35,7 @@ export default {
 		}
 	},
 	beforeRouteEnter (to, from, next) {
-		next(component => {
-			component.getDetail(to.params.itemId);
-		});
+		next(component => component.getDetail(to.params.itemId));
 	},
 	beforeRouteUpdate (to, from, next) {
 		this.getDetail(to.params.itemId);

code/vueApp/src/ngVueBridgeCode/services/searchService.js

@@ -6,7 +6,8 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
 	state: {
-		results: []
+		results: [],
+		selectedDetailId: null
 	},
 
 	actions: {
@@ -19,13 +20,17 @@ export default new Vuex.Store({
 				];
 
 				setTimeout(() => {
+					store.commit('setSelectedDetail', null);
 					store.commit('setResults', results);
 					resolve(results);
 				}, 2000);
 			});
 		},
 		addResult: (store, result) => { 
 			store.commit('addResult', result);
+		},
+		selectItem: (store, id) => { 
+			store.commit('setSelectedDetail', id);
 		}
 	},
 
@@ -36,10 +41,14 @@ export default new Vuex.Store({
 		addResult: (state, result) => {
 			state.results = state.results.concat(result);
 			VueAngularEventBus.$emit('result-added');
+		},
+		setSelectedDetail: (state, id) => { 
+			state.selectedDetailId = id;
 		}
 	},
 
 	getters: {
-		resultsCount: state => state.results.length
+		resultsCount: state => state.results.length,
+		currentDetail: state => state.results.find(r => r.id === state.selectedDetailId)
 	}
 });