update vuex

Author: Allenice

template/src/components/views/todo/filter/filter.vue

@@ -6,9 +6,6 @@
  -->
 <template>
     <div class="filters">
-        <!-- <button class="cur">All</button>
-        <button>Active</button>
-        <button>Completed</button> -->
         <router-link to="/todo/all" active-class="cur">All</router-link>
         <router-link to="/todo/active" active-class="cur">Active</router-link>
         <router-link to="/todo/completed" active-class="cur">Completed</router-link>

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

@@ -11,7 +11,7 @@ import template from './footer.vue'
 
 import Filters from '../filter'
 
-import { types, module} from 'store/modules/todo'
+import { Store } from 'store/modules/todo'
 
 @Component({
     name: 'tag-todo-footer',
@@ -21,8 +21,9 @@ import { types, module} from 'store/modules/todo'
     }
 })
 export default class Footer extends Vue {
-    @module.Getter(types.getter.remaining) remaining: Types.todo.TodoItem[]
-    @module.Getter(types.getter.completed) completed: Types.todo.TodoItem[]
+    @Store.getter remaining: Types.todo.TodoItem[]
+    @Store.getter completed: Types.todo.TodoItem[]
 
-    @module.Mutation(types.mutation.clearComplete) clearComplete
+    @Store.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 { types, module } from 'store/modules/todo'
+import { Store } from 'store/modules/todo'
 
 @Component({
     name: 'tag-todo-inputbox',
@@ -18,12 +18,15 @@ import { types, module } from 'store/modules/todo'
 export default class InputBox extends Vue {
     title = ''
 
-    @module.State(types.state.todos) todos
+    @Store.state todos: Types.todo.TodoItem[]
 
-    @module.Getter(types.getter.isAllCompleted) isAllCompleted
+    @Store.getter isAllCompleted: boolean
 
-    @module.Mutation(types.mutation.addTodo) addTodo
-    @module.Mutation(types.mutation.toggleAllTodoStatus) toggleAllStatus
+    @Store.mutation
+    addTodo: (todo: Types.todo.TodoItem) => void
+
+    @Store.mutation('toggleAllTodoStatus')
+    toggleAllStatus: (status: boolean) => void
 
     onEnter () {
         this.addTodo({

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 { types, module } from 'store/modules/todo'
+import { Store } from 'store/modules/todo'
 
 @Component({
     name: 'tag-todo-item',
@@ -19,6 +19,12 @@ export default class Item extends Vue {
     @Prop()
     todo: Types.todo.TodoItem
 
+    @Store.mutation('removeTodo')
+    remove: (todo: Types.todo.TodoItem) => void
+
+    @Store.mutation('toggleTodoStatus')
+    toggleStatus: (payload: { todo: Types.todo.TodoItem, status: boolean }) => void
+
     get status () {
         return this.todo.completed
     }
@@ -29,7 +35,4 @@ export default class Item extends Vue {
             status: value
         })
     }
-
-    @module.Mutation(types.mutation.removeTodo) remove
-    @module.Mutation(types.mutation.toggleTodoStatus) toggleStatus
 }

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

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

template/src/store/modules/todo.ts

@@ -5,16 +5,12 @@
 import Vuex from 'vuex'
 import { State, Getter, Mutation, Action, namespace } from 'vuex-class'
 import keymirror from '../utils/keymirror'
-import { getter, mutation, action } from '../utils/vuexUtil'
-
-// type alias
-type TodoState = Types.State.TodoState
-type RootState = Types.State.RootState
+import { getter, mutation, action, decorator } from '../utils/vuexUtil'
 
 const STORE_KEY = 'vue-typescript-todos'
 
 /*** state ***/
-let state: TodoState = {
+let state = {
     filter: '',
     todos: []
 }
@@ -103,7 +99,7 @@ let actions = action(state, {
 })
 
 /*** module store ***/
-let store: Vuex.Module<TodoState, RootState> = {
+let store = {
     namespaced: true,
     state: state,
     getters: getters,
@@ -126,4 +122,11 @@ export let module = {
     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 default store

template/src/store/utils/vuexUtil.ts

@@ -3,6 +3,7 @@
  */
 
 import Vuex from 'vuex'
+import { BindingHelper } from 'vuex-class/lib/bindings'
 
 // type alias
 type RootState = Types.State.RootState
@@ -25,3 +26,23 @@ export function mutation<S, T extends MutationTree<S>>(state: S, mutations: T):
 export function action<S, T extends ActionTree<S, RootState>>(state: S, actions: T): {[K in keyof T]: Action<S, RootState> } {
     return actions
 }
+
+export function decorator<D extends BindingHelper, T>(helper: D, keyMap: T) {
+    type KeyType = keyof T
+    type Decorator = (target, key: string) => any
+
+    function decoratorWrapper(target, key: KeyType): void
+    function decoratorWrapper(originKey: KeyType): Decorator
+    function decoratorWrapper(a: any | KeyType, b?: KeyType): Decorator | void {
+        if (typeof b === 'string') {
+            const target = a
+            const key = b
+            return helper(target, key)
+        }
+
+        const originKey = a
+        return helper(originKey)
+    }
+
+    return decoratorWrapper
+}