ADD：vuex使用案例

Author: leeycode

@types/global.d.ts

@@ -0,0 +1,28 @@
+declare const config: {
+  version: string;
+  systemName: string;
+  debug: boolean;
+};
+
+declare interface ResponseBody<T> {
+  data: T;
+  code: number;
+  total: number;
+}
+declare interface ResponseStatus {
+  loading: boolean;
+  error: boolean;
+}
+declare interface Responsed<T> extends ResponseStatus {
+  res: ResponseBody<T>;
+}
+declare interface ResponseNotPage<T> extends ResponseStatus {
+  data: T;
+}
+declare interface PageParams {
+  page: number;
+  pageSize: number;
+}
+declare interface RequsetParams extends PageParams {
+  search: string;
+}

package.json

@@ -48,6 +48,7 @@
     "vue-loader": "^15.7.0",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.10",
+    "vuex-module-decorators": "^1.0.1",
     "webpack": "^4.28.4",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.3.1"

src/pages/home/Home.ts

@@ -2,7 +2,31 @@
   <div class="home">
     <img alt="Vue logo" src="../../assets/logo.png" />
     <hello-world msg="vue.js" />
+    {{ $store.state.home.name }}
+    <br/>
+    {{ info }}
+    <button @click="handleClick">点击</button>
   </div>
 </template>
 
-<script lang="ts" src="./Home.ts"></script>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import HelloWorld from '@/components/HelloWorld.vue';
+import { HomeModule } from '@/store/modules/home';
+
+@Component({
+  components: {
+    HelloWorld
+  }
+})
+export default class Home extends Vue {
+  get info() {
+    return HomeModule.getMessage;
+  }
+
+  private handleClick() {
+    HomeModule.updateMessage('liwu');
+  }
+}
+
+</script>

src/pages/home/Home.vue

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+// Declare empty store first, dynamically register all modules later.
+export default new Vuex.Store({});

src/store.ts

@@ -0,0 +1,31 @@
+import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators';
+import store from '@/store';
+
+@Module({ namespaced: true, dynamic: true, name: 'home', store })
+
+export default class Home extends VuexModule {
+  public name: string = '游客';
+  public message: string = '';
+
+  get getMessage() {
+    return `当前时间${new Date()}：${this.message}`;
+  }
+
+  @Mutation
+  private SET_NAME(newName: string): void {
+    this.name = newName;
+  }
+
+  @Mutation
+  private SET_MESSAGE(message: string) {
+    this.message = message;
+  }
+
+  @Action
+  public updateMessage(newName: string): void {
+    this.SET_NAME(newName);
+    this.SET_MESSAGE('欢迎您');
+  }
+}
+
+export const HomeModule = getModule(Home);