Merge branch 'develop'

Allenice · Allenice · commit b53632fb9934 · 2017-09-08T16:12:45.000+08:00
# Conflicts:
#	docs/en/Vuex.md
#	docs/zh-cn/Vuex.md
diff --git a/docs/en/Vuex.md b/docs/en/Vuex.md
@@ -6,9 +6,9 @@ By using vue-cli start a project with Vuex, will generate a todo list example by
 
 Template use [vuex-class](https://github.com/ktsn/vuex-class) to simplify vuex. Before use vuex, please read [vuex](https://vuex.vuejs.org/) for more information.
 
-### Define state
+### Define root state
 
-The first step to use vuex is defining state.
+The first step to use vuex is defining root state.
 
 ```typescript
 // typings/interface/state.d.ts
@@ -18,24 +18,31 @@ export namespace State {
     export interface RootState {
         [key: string]: any
     }
-
-    // todo state
-    export interface TodoState {
-        filter: string
-        todos: Types.todo.TodoItem[]
-    }
 }
 ```
 
 ### Write vuex module
 
 ```typescript
 import Vuex from 'vuex'
-import { State, Getter, Mutation, Action, namespace } from 'vuex-class'
 import keymirror from '../utils/keymirror'
 
-// Use vuexUtil methods to write getter, mutation 和 action
-import { getter, mutation, action } from '../utils/vuexUtil'
+import {
+    State as vState,
+    Getter as vGetter,
+    Mutation as vMutation,
+    Action as vAction,
+    namespace
+} from 'vuex-class'
+
+// Use vuexUtil methods to write getter, mutation and action
+import {
+    getter,
+    mutation,
+    action,
+    decorator
+} from '../utils/vuexUtil'
+
 
 /*** state ***/
 let state: TodoState = {}
@@ -72,12 +79,12 @@ 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)
-}
+
+const storeName = 'todo'
+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
 ```
@@ -98,17 +105,24 @@ const store = new Vuex.Store({
 ### Use in components
 
 ```typescript
-// vuex
-import { types, module } from 'store/modules/todo'
+import { State, Getter, Mutation, Action } from 'store/modules/todo'
 
 class Todo extends Vue {
-    @module.State(types.state.todos) allTodos
-
-    @module.Getter(types.getter.filterTodos) todos
-
-    @module.Mutation(types.mutation.setFilter) setFilter
-
-    @module.Action(types.action.fetch) fetch
+    @State('todos')
+    allTodos: Types.todo.Item[]
+    
+    // == @State('foo') foo: string
+    @State
+    foo: string
+    
+    @Getter('filterTodos')
+    todos: Types.todo.Item[]
+
+    @Mutation
+    filterTodos: (filter: string) => void
+
+    @Action
+    fetch: () => Promise<any>
 }
 ```
 
diff --git a/docs/zh-cn/Vuex.md b/docs/zh-cn/Vuex.md
@@ -6,9 +6,9 @@
 
 模板使用了 [vuex-class](https://github.com/ktsn/vuex-class) 简化 vuex。使用 vuex 之前，请先了解 [vuex](https://vuex.vuejs.org/)。
 
-### 定义模块 state
+### 定义模块 RootState
 
-使用 vuex 的第一步是先定义模块的 state 有哪一些。
+使用 vuex 的第一步是先定义 RootState。
 
 ```typescript
 // typings/interface/state.d.ts
@@ -18,24 +18,31 @@ export namespace State {
     export interface RootState {
         [key: string]: any
     }
-
-    // todo state
-    export interface TodoState {
-        filter: string
-        todos: Types.todo.TodoItem[]
-    }
 }
 ```
 
 ### 编写 vuex 模块
 
 ```typescript
 import Vuex from 'vuex'
-import { State, Getter, Mutation, Action, namespace } from 'vuex-class'
 import keymirror from '../utils/keymirror'
 
-// 使用 vuexUtil 提供的方法编写 getter, mutation 和 action
-import { getter, mutation, action } from '../utils/vuexUtil'
+import {
+    State as vState,
+    Getter as vGetter,
+    Mutation as vMutation,
+    Action as vAction,
+    namespace
+} from 'vuex-class'
+
+// Use vuexUtil methods to write getter, mutation and action
+import {
+    getter,
+    mutation,
+    action,
+    decorator
+} from '../utils/vuexUtil'
+
 
 /*** state ***/
 let state: TodoState = {}
@@ -72,14 +79,15 @@ 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)
-}
+
+const storeName = 'todo'
+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
+
 ```
 
 ### 在主 store 中加入该模块
@@ -99,18 +107,26 @@ const store = new Vuex.Store({
 
 ```typescript
 // vuex
-import { types, module } from 'store/modules/todo'
+import { State, Getter, Mutation, Action } from 'store/modules/todo'
 
 class Todo extends Vue {
-    @module.State(types.state.todos) allTodos
-
-    @module.Getter(types.getter.filterTodos) todos
-
-    @module.Mutation(types.mutation.setFilter) setFilter
-
-    @module.Action(types.action.fetch) fetch
+    @State('todos')
+    allTodos: Types.todo.Item[]
+    
+    // == @State('foo') foo: string
+    @State
+    foo: string
+    
+    @Getter('filterTodos')
+    todos: Types.todo.Item[]
+
+    @Mutation
+    filterTodos: (filter: string) => void
+
+    @Action
+    fetch: () => Promise<any>
 }
-```
-
 
+```
+建议 state, getter, mutation, action 需要明确写出其类型。
 
diff --git a/template/src/components/views/todo/filter/filter.vue b/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>
diff --git a/template/src/components/views/todo/footer/footer.ts b/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 { Getter, Mutation } from 'store/modules/todo'
 
 @Component({
     name: 'tag-todo-footer',
@@ -21,8 +21,12 @@ 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[]
+    @Getter
+    remaining: Types.todo.Item[]
 
-    @module.Mutation(types.mutation.clearComplete) clearComplete
+    @Getter
+    completed: Types.todo.Item[]
+
+    @Mutation
+    clearComplete: () => void
 }
diff --git a/template/src/components/views/todo/inputBox/inputBox.ts b/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 { State, Getter, Mutation } from 'store/modules/todo'
 
 @Component({
     name: 'tag-todo-inputbox',
@@ -18,12 +18,17 @@ import { types, module } from 'store/modules/todo'
 export default class InputBox extends Vue {
     title = ''
 
-    @module.State(types.state.todos) todos
+    @State
+    todos: Types.todo.Item[]
 
-    @module.Getter(types.getter.isAllCompleted) isAllCompleted
+    @Getter
+    isAllCompleted: boolean
 
-    @module.Mutation(types.mutation.addTodo) addTodo
-    @module.Mutation(types.mutation.toggleAllTodoStatus) toggleAllStatus
+    @Mutation
+    addTodo: (todo: Types.todo.Item) => void
+
+    @Mutation('toggleAllTodoStatus')
+    toggleAllStatus: (status: boolean) => void
 
     onEnter () {
         this.addTodo({
diff --git a/template/src/components/views/todo/item/item.ts b/template/src/components/views/todo/item/item.ts
@@ -9,15 +9,21 @@ 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 { Mutation } from 'store/modules/todo'
 
 @Component({
     name: 'tag-todo-item',
     mixins: [template]
 })
 export default class Item extends Vue {
     @Prop()
-    todo: Types.todo.TodoItem
+    todo: Types.todo.Item
+
+    @Mutation('removeTodo')
+    remove: (todo: Types.todo.Item) => void
+
+    @Mutation('toggleTodoStatus')
+    toggleStatus: (payload: { todo: Types.todo.Item, 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
 }
diff --git a/template/src/components/views/todo/todo.ts b/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 { State, Getter, Mutation, Action } from 'store/modules/todo'
 
 @Component({
     name: 'view-todo',
@@ -26,25 +26,33 @@ import { types, module } from 'store/modules/todo'
     }
 })
 export default class Todo extends Vue {
-    @module.State(types.state.todos) allTodos
+    @State('todos')
+    allTodos: Types.todo.Item[]
 
-    @module.Getter(types.getter.filterTodos) todos
+    @Getter('filterTodos')
+    todos: Types.todo.Item[]
 
-    @module.Mutation(types.mutation.setFilter) setFilter
-    @module.Mutation(types.mutation.clearData) clearData
+    @Mutation
+    setFilter: (filter) => void
 
-    @module.Action(types.action.fetch) fetch
-    @module.Action(types.action.save) save
+    @Mutation
+    clearData: () => void
+
+    @Action
+    fetch: () => Promise<any>
+
+    @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)
diff --git a/template/src/store/modules/todo.ts b/template/src/store/modules/todo.ts
diff --git a/template/src/store/utils/vuexUtil.ts b/template/src/store/utils/vuexUtil.ts
diff --git a/template/typings/interface/todo.d.ts b/template/typings/interface/todo.d.ts
