use vuex-class

$ npm install vuex-class --save-dev

Author: havvg

package-lock.json

@@ -27,6 +27,7 @@
  "vue-property-decorator": "^6.0.0",
  "vue-template-compiler": "^2.4.4",
  "vue-ts-loader": "0.0.3",
+ "vuex-class": "^0.3.0",
  "webpack": "^3.6.0",
  "webpack-dev-server": "^2.9.1"
  }

package.json

@@ -56,23 +56,31 @@
 
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Getter, Mutation } from 'vuex-class'
 
 import Todo from './Todo'
 
 Vue.filter('pluralize', (n: number): string => {
- return n === 1 ? 'item' : 'items'
+  return n === 1 ? 'item' : 'items'
 })
 
 Vue.directive('todo-focus', (el, binding) => {
- if (binding.value) {
- el.focus()
- }
+  if (binding.value) {
+  el.focus()
+  }
 })
 
 @Component({
  name: 'app'
 })
 export default class App extends Vue {
+ @Getter('all') todos
+ @Getter remaining
+
+ @Mutation('toggle') toggleTodo
+ @Mutation('remove') removeTodo
+ @Mutation removeCompleted
+
  private visibility: string = 'all'
 
  private newTodo: string = ''
@@ -85,18 +93,10 @@ export default class App extends Vue {
  window.addEventListener('hashchange', this.onHashChange)
  }
 
- get todos(): Todo[] {
- return this.$store.getters.all
- }
-
  get filteredTodos(): Todo[] {
  return this.$store.getters[this.visibility]
  }
 
- get remaining(): number {
- return this.$store.getters.active.length
- }
-
  get allDone(): boolean {
  return this.remaining === 0
  }
@@ -116,10 +116,6 @@ export default class App extends Vue {
  this.newTodo = ''
  }
 
- removeTodo(todo: Todo) {
- this.$store.commit('remove', todo)
- }
-
  editTodo(todo: Todo) {
  this.beforeEditCache = todo.title
  this.editedTodo = todo
@@ -145,14 +141,6 @@ export default class App extends Vue {
  todo.title = this.beforeEditCache
  }
 
- toggleTodo(todo: Todo) {
- this.$store.commit('toggle', todo)
- }
-
- removeCompleted() {
- this.$store.commit('removeCompleted')
- }
-
  onHashChange() {
  const visibility = window.location.hash.replace(/#\/?/, '')
 

src/App.vue

@@ -62,6 +62,10 @@ export default function TodoStore() {
 
  completed(state): Todo[] {
  return state.todos.filter(todo => todo.completed)
+ },
+
+ remaining(state, getters): number {
+ return getters.active.length
  }
  }
  })