update vuex

Author: Allenice

template/src/components/views/todo/footer/footer.ts

@@ -11,7 +11,7 @@ import template from './footer.vue'
 
 import Filters from '../filter'
 
-import { Store } from 'store/modules/todo'
+import { Getter, Mutation } from 'store/modules/todo'
 
 @Component({
     name: 'tag-todo-footer',
@@ -21,9 +21,12 @@ import { Store } from 'store/modules/todo'
     }
 })
 export default class Footer extends Vue {
-    @Store.getter remaining: Types.todo.Item[]
-    @Store.getter completed: Types.todo.Item[]
+    @Getter
+    remaining: Types.todo.Item[]
 
-    @Store.mutation
+    @Getter
+    completed: Types.todo.Item[]
+
+    @Mutation
     clearComplete: () => void
 }

template/src/components/views/todo/inputBox/inputBox.ts

@@ -9,7 +9,7 @@ import Vue from 'components/base'
 import { Component } from 'vue-property-decorator'
 import template from './inputBox.vue'
 
-import { Store } from 'store/modules/todo'
+import { State, Getter, Mutation } from 'store/modules/todo'
 
 @Component({
     name: 'tag-todo-inputbox',
@@ -18,14 +18,16 @@ import { Store } from 'store/modules/todo'
 export default class InputBox extends Vue {
     title = ''
 
-    @Store.state todos: Types.todo.Item[]
+    @State
+    todos: Types.todo.Item[]
 
-    @Store.getter isAllCompleted: boolean
+    @Getter
+    isAllCompleted: boolean
 
-    @Store.mutation
+    @Mutation
     addTodo: (todo: Types.todo.Item) => void
 
-    @Store.mutation('toggleAllTodoStatus')
+    @Mutation('toggleAllTodoStatus')
     toggleAllStatus: (status: boolean) => void
 
     onEnter () {

template/src/components/views/todo/item/item.ts

@@ -9,7 +9,7 @@ import Vue from 'components/base'
 import { Component, Prop } from 'vue-property-decorator'
 import template from './item.vue'
 
-import { Store } from 'store/modules/todo'
+import { Mutation } from 'store/modules/todo'
 
 @Component({
     name: 'tag-todo-item',
@@ -19,10 +19,10 @@ export default class Item extends Vue {
     @Prop()
     todo: Types.todo.Item
 
-    @Store.mutation('removeTodo')
+    @Mutation('removeTodo')
     remove: (todo: Types.todo.Item) => void
 
-    @Store.mutation('toggleTodoStatus')
+    @Mutation('toggleTodoStatus')
     toggleStatus: (payload: { todo: Types.todo.Item, status: boolean }) => void
 
     get status () {

template/src/components/views/todo/todo.ts

@@ -14,7 +14,7 @@ import TodoItem from './item'
 import TodoFooter from './footer'
 
 // vuex
-import { Store } from 'store/modules/todo'
+import { State, Getter, Mutation, Action } from 'store/modules/todo'
 
 @Component({
     name: 'view-todo',
@@ -26,15 +26,23 @@ import { Store } from 'store/modules/todo'
     }
 })
 export default class Todo extends Vue {
-    @Store.state('todos') allTodos: Types.todo.Item[]
+    @State('todos')
+    allTodos: Types.todo.Item[]
 
-    @Store.getter('filterTodos') todos: Types.todo.Item[]
+    @Getter('filterTodos')
+    todos: Types.todo.Item[]
 
-    @Store.mutation setFilter: (filter) => void
-    @Store.mutation clearData: () => void
+    @Mutation
+    setFilter: (filter) => void
 
-    @Store.action fetch: () => Promise<any>
-    @Store.action save: () => Promise<any>
+    @Mutation
+    clearData: () => void
+
+    @Action
+    fetch: () => Promise<any>
+
+    @Action
+    save: () => Promise<any>
 
     @Watch('todos', {deep: true})
     onTodosChange () {

template/src/store/modules/todo.ts

@@ -3,10 +3,24 @@
  */
 
 import Vuex from 'vuex'
-import { State, Getter, Mutation, Action, namespace } from 'vuex-class'
 import keymirror from '../utils/keymirror'
-import { getter, mutation, action, decorator } from '../utils/vuexUtil'
 
+import {
+    State as vState,
+    Getter as vGetter,
+    Mutation as vMutation,
+    Action as vAction,
+    namespace
+} from 'vuex-class'
+
+import {
+    getter,
+    mutation,
+    action,
+    decorator
+} from '../utils/vuexUtil'
+
+const storeName = 'todo'
 const STORE_KEY = 'vue-typescript-todos'
 
 /*** state ***/
@@ -115,18 +129,9 @@ export let types = {
     action: keymirror(actions)
 }
 
-export let module = {
-    State: namespace('todo', State),
-    Getter: namespace('todo', Getter),
-    Mutation: namespace('todo', Mutation),
-    Action: namespace('todo', Action)
-}
-
-export let Store = {
-    state: decorator(module.State, types.state),
-    getter: decorator(module.Getter, types.getter),
-    mutation: decorator(module.Mutation, types.mutation),
-    action: decorator(module.Action, types.action),
-}
+export let State = decorator(namespace(storeName, vState), types.state)
+export let Getter = decorator(namespace(storeName, vGetter), types.getter)
+export let Mutation = decorator(namespace(storeName, vMutation), types.mutation)
+export let Action = decorator(namespace(storeName, vAction), types.action)
 
 export default store