integrate VueRx w/ example event subscription

havvg · havvg · commit 6775ba3776ce · 2017-10-31T17:47:39.000+01:00
$ npm install vue-rx rxjs --save
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,8 +8,10 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
+    "rxjs": "^5.5.2",
     "typescript": "^2.5.3",
     "vue": "^2.4.4",
+    "vue-rx": "^5.0.0",
     "vuex": "^3.0.0"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
@@ -58,6 +58,12 @@
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import { Getter, Mutation } from 'vuex-class'
 
+import { Observable } from 'rxjs/Observable'
+import 'rxjs/add/observable/fromEvent'
+import 'rxjs/add/operator/map'
+import 'rxjs/add/operator/startWith'
+import 'rxjs/add/operator/shareReplay'
+
 import Todo from './Todo'
 
 Vue.filter('pluralize', (n: number): string =>  {
@@ -71,7 +77,14 @@ Vue.directive('todo-focus', (el, binding) => {
 })
 
 @Component({
-    name: 'app'
+    name: 'app',
+    subscriptions: {
+        hashChange: Observable.fromEvent(window, 'hashchange')
+            .map(() => window.location.hash)
+            .startWith(window.location.hash)
+            .shareReplay(1)
+        ,
+    },
 })
 export default class App extends Vue {
     @Getter('all') todos
@@ -87,12 +100,6 @@ export default class App extends Vue {
     private editedTodo: Todo|null = null
     private beforeEditCache: string|null = null
 
-    constructor() {
-        super()
-
-        window.addEventListener('hashchange', this.onHashChange)
-    }
-
     get filteredTodos(): Todo[] {
         return this.$store.getters[this.visibility]
     }
@@ -141,16 +148,18 @@ export default class App extends Vue {
         todo.title = this.beforeEditCache
     }
 
-    onHashChange() {
-        const visibility = window.location.hash.replace(/#\/?/, '')
+    created() {
+        this.$observables.hashChange.subscribe((hash: string) => {
+            const visibility = hash.replace(/#\/?/, '')
 
-        if (this.$store.getters[visibility]) {
-            this.visibility = visibility
-        } else {
-            window.location.hash = ''
+            if (this.$store.getters[visibility]) {
+                this.visibility = visibility
+            } else {
+                window.location.hash = ''
 
-            this.visibility = 'all'
-        }
+                this.visibility = 'all'
+            }
+        })
     }
 }
 </script>
diff --git a/src/index.ts b/src/index.ts
@@ -1,13 +1,18 @@
 import Vue from 'vue'
 import Vuex from 'vuex';
+import VueRx from 'vue-rx'
+import { Observable } from 'rxjs/Observable'
 
 import App from './App.vue'
 import TodoStore from './TodoStore'
 
 Vue.use(Vuex)
+Vue.use(VueRx, {
+    Observable
+})
 
 new Vue({
-  el: '#app',
-  store: TodoStore(),
-  render: h => h(App)
+    el: '#app',
+    store: TodoStore(),
+    render: h => h(App),
 })
