Export property names from defined Vuex modules.

anotherKyleFrom1994 · anotherKyleFrom1994 · commit 1db63f0d321d · 2020-01-10T16:35:26.000+08:00
diff --git a/src/components/activity/feed/Feed.ts b/src/components/activity/feed/Feed.ts
@@ -1,5 +1,6 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
+import { ModuleName, StateType } from '@/plugins/store/modules/activity';
 import FeedCard from '@/components/activity/feed_card/FeedCard.vue';
 import { IArticle } from '@/data/articles';
 
@@ -9,20 +10,20 @@ export default class Feed extends Vue {
   private layout: number[] = [2, 2, 2, 2, 2, 2, 2];
   private page: number = 1;
 
-  @namespace('activity').State('photos') photos!: IArticle[];
+  @namespace(ModuleName).State(StateType.PHOTOS) photos!: IArticle[];
 
-  get pages() {
+  get pages () {
     return Math.ceil(this.photos.length / 11);
   }
 
-  get paginatedPhotos() {
+  get paginatedPhotos () {
     const start = (this.page - 1) * 4;
     const stop = this.page * 4;
 
     return this.photos.slice(start, stop);
   }
 
-  @Watch('page') onPageChanged(value: number, oldValue: number) {
+  @Watch('page') onPageChanged (value: number, oldValue: number) {
     window.scrollTo(0, 0);
   }
 }
diff --git a/src/components/home/feed/Feed.ts b/src/components/home/feed/Feed.ts
@@ -1,5 +1,6 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
 import { namespace, State } from 'vuex-class';
+import { ModuleName, StateType } from '@/plugins/store/modules/home';
 import FeedCard from '@/components/home/feed_card/FeedCard.vue';
 import { IArticle } from '@/data/articles';
 
@@ -9,20 +10,20 @@ export default class Feed extends Vue {
   private layout: number[] = [2, 2, 1, 2, 2, 3, 3, 3, 3, 3, 3];
   private page: number = 1;
 
-  @namespace('home').State('articles') articles!: IArticle[];
+  @namespace(ModuleName).State(StateType.TOPICS) topics!: IArticle[];
 
-  get pages() {
-    return Math.ceil(this.articles.length / 11);
+  get pages () {
+    return Math.ceil(this.topics.length / 11);
   }
 
-  get paginatedArticles() {
+  get paginatedTopics () {
     const start = (this.page - 1) * 11;
     const stop = this.page * 11;
 
-    return this.articles.slice(start, stop);
+    return this.topics.slice(start, stop);
   }
 
-  @Watch('page') onPageChanged(value: number, oldValue: number) {
+  @Watch('page') onPageChanged (value: number, oldValue: number) {
     window.scrollTo(0, 0);
   }
 }
diff --git a/src/components/home/feed/Feed.vue b/src/components/home/feed/Feed.vue
@@ -5,10 +5,10 @@
         <slot />
       </v-col>
 
-      <feed-card v-for="(article, i) in paginatedArticles"
-                 :key="article.title"
+      <feed-card v-for="(topic, i) in paginatedTopics"
+                 :key="topic.title"
                  :size="layout[i]"
-                 :value="article" />
+                 :value="topic" />
     </v-row>
 
     <v-row align="center">
diff --git a/src/components/home/newest_posts/NewestPosts.ts b/src/components/home/newest_posts/NewestPosts.ts
@@ -1,8 +1,9 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
 import { namespace, State } from 'vuex-class';
+import { ModuleName, StateType } from '@/plugins/store/modules/home';
 import { IArticle } from '@/data/articles';
 
 @Component({})
 export default class NewestPosts extends Vue {
-  @namespace('home').State('articles') articles!: IArticle[];
+  @namespace(ModuleName).State(StateType.TOPICS) topics!: IArticle[];
 };
diff --git a/src/components/home/newest_posts/NewestPosts.vue b/src/components/home/newest_posts/NewestPosts.vue
@@ -1,13 +1,13 @@
 <template>
   <v-container pa-0>
     <base-subheading>Newest Blog Posts</base-subheading>
-    <v-row v-for="(article, i) in articles.slice(11, 14)"
+    <v-row v-for="(topic, i) in topics.slice(11, 14)"
            :key="i"
            align="center"
            class="mb-2">
       <v-col sm="12"
              class="d-flex">
-        <v-img :src="require(`@/assets/articles/${article.hero}`)"
+        <v-img :src="require(`@/assets/articles/${topic.hero}`)"
                class="mr-3"
                height="36"
                max-width="36" />
diff --git a/src/components/home/tags/Tags.ts b/src/components/home/tags/Tags.ts
@@ -1,7 +1,8 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
+import { ModuleName, GetterType } from '@/plugins/store/modules/home';
 import { namespace, State, Getter } from 'vuex-class';
 
 @Component({})
 export default class Tags extends Vue {
-  @namespace('home').Getter('categories') categories!: any;
+  @namespace(ModuleName).Getter(GetterType.CATEGORIES) categories!: any;
 };
diff --git a/src/pages/generic/cta/Cta.ts b/src/pages/generic/cta/Cta.ts
@@ -1,10 +1,10 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
-import { ActionType } from '@/plugins/store/modules/app';
+import { ModuleName, ActionType } from '@/plugins/store/modules/app';
 
 @Component({})
 export default class Cta extends Vue {
-  @namespace('app').Action(ActionType.FETCH_IMAGES) fetchImages!: Function;
+  @namespace(ModuleName).Action(ActionType.FETCH_IMAGES) fetchImages!: Function;
 
   private hello () {
     this.fetchImages();
diff --git a/src/pages/generic/drawer/Drawer.ts b/src/pages/generic/drawer/Drawer.ts
@@ -1,13 +1,14 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
-import { namespace, State, Getter, Mutation } from 'vuex-class';
+import { namespace } from 'vuex-class';
+import { ModuleName, GetterType, StateType, MutationType } from '@/plugins/store/modules/home';
 
 @Component({ name: 'CoreDrawer' })
 export default class Drawer extends Vue {
-  @namespace('home').Getter('links') links: any;
-  @namespace('home').State('drawer') drawer: any;
-  @namespace('home').Mutation('setDrawer') setDrawer: any;
+  @namespace(ModuleName).Getter(GetterType.LINKS) links: any;
+  @namespace(ModuleName).State(StateType.DRAWER) drawer: any;
+  @namespace(ModuleName).Mutation(MutationType.SET_DRAWER) setDrawer: any;
 
-  private onClickListItem(e: any, item: any) {
+  private onClickListItem (e: any, item: any) {
     e.stopPropagation();
 
     if (item.to === '/') {
diff --git a/src/pages/generic/toolbar/Toolbar.ts b/src/pages/generic/toolbar/Toolbar.ts
@@ -1,12 +1,13 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
 import { namespace, State, Getter, Mutation } from 'vuex-class';
+import { ModuleName, GetterType, StateType, MutationType } from '@/plugins/store/modules/home';
 
 @Component({})
 export default class Toolbar extends Vue {
-  @namespace('home').Getter('links') links!: any;
-  @namespace('home').Mutation('toggleDrawer') toggleDrawer!: any;
+  @namespace(ModuleName).Getter(GetterType.LINKS) links!: any;
+  @namespace(ModuleName).Mutation(MutationType.TOGGLE_DRAWER) toggleDrawer!: any;
 
-  private onClickButton(e: Event, item: any) {
+  private onClickButton (e: Event, item: any) {
     e.stopPropagation();
     if (item.to || !item.href) return;
 
diff --git a/src/pages/home/Home.vue b/src/pages/home/Home.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="home">
-    <articles>
+    <topics>
       <banner />
-    </articles>
+    </topics>
 
     <about />
 
@@ -13,21 +13,21 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
-  import About from './about/About.vue';
-  import Articles from './articles/Articles.vue';
-  import Banner from './banner/Banner.vue';
-  import Social from './social/Social.vue';
-  import Subscribe from './subscribe/Subscribe.vue';
+import { Component, Vue } from 'vue-property-decorator';
+import About from './about/About.vue';
+import Topics from './topics/Topics.vue';
+import Banner from './banner/Banner.vue';
+import Social from './social/Social.vue';
+import Subscribe from './subscribe/Subscribe.vue';
 
-  @Component({
-    components: {
-      About,
-      Articles,
-      Banner,
-      Social,
-      Subscribe
-    }
-  })
-  export default class extends Vue {};
+@Component({
+  components: {
+    About,
+    Topics,
+    Banner,
+    Social,
+    Subscribe
+  }
+})
+export default class extends Vue { };
 </script>
diff --git a/src/pages/home/topics/Topics.ts b/src/pages/home/topics/Topics.ts
@@ -2,4 +2,4 @@ import { Component, Vue } from 'vue-property-decorator';
 import Feed from '@/components/home/feed/Feed.vue';
 
 @Component({ components: { Feed } })
-export default class Articles extends Vue {}
+export default class Topics extends Vue {}
diff --git a/src/pages/home/topics/Topics.vue b/src/pages/home/topics/Topics.vue
@@ -7,4 +7,4 @@
 </template>
 
 <script lang="ts"
-        src="./Articles.ts" />
+        src="./Topics.ts" />
diff --git a/src/plugins/store/modules/activity/index.ts b/src/plugins/store/modules/activity/index.ts
@@ -1,7 +1,7 @@
-import state from './modules/state';
-import mutations from './modules/mutations';
-import actions from './modules/actions';
-import getters from './modules/getters';
+import state, { StateType } from './modules/state';
+import mutations, { MutationType } from './modules/mutations';
+import actions, { ActionType } from './modules/actions';
+import getters, { GetterType } from './modules/getters';
 
 const activity = {
   namespaced: true, // 成為帶名稱空間的模組
@@ -11,4 +11,6 @@ const activity = {
   getters: getters
 };
 
+export const ModuleName = 'activity';
+export { StateType, MutationType, ActionType, GetterType };
 export default activity;
diff --git a/src/plugins/store/modules/activity/modules/actions.ts b/src/plugins/store/modules/activity/modules/actions.ts
@@ -1,6 +1,9 @@
 import { Store } from 'vuex';
 import { State } from '@/plugins/store';
 
+export enum ActionType {
+};
+
 const actions = {
 };
 
diff --git a/src/plugins/store/modules/activity/modules/getters.ts b/src/plugins/store/modules/activity/modules/getters.ts
@@ -1,34 +1,12 @@
 import { State } from '@/plugins/store';
 import { GetterTree, Getter } from 'vuex';
 
-export interface Category {
-  text: any;
-  to: string;
-}
+export enum GetterType {
 
-const getters: GetterTree<State<any>, Getter<string, any>> = {
-  categories: (state: State<any>) => {
-    const categories: Category[] = [];
-
-    for (const photo of state.photos) {
-      if (
-        !photo.category ||
-        categories.find(category => category.text === photo.category)
-      ) continue;
-
-      const text = photo.category;
+};
 
-      categories.push({
-        text,
-        to: `/category/${text}`
-      });
-    }
+const getters: GetterTree<State<any>, Getter<string, any>> = {
 
-    return categories.sort().slice(0, 4);
-  },
-  links: (state: State<any>, getters: any) => {
-    return state.items.concat(getters.categories);
-  }
 };
 
 export default getters;
diff --git a/src/plugins/store/modules/activity/modules/mutations.ts b/src/plugins/store/modules/activity/modules/mutations.ts
@@ -1,9 +1,9 @@
-import { State } from '@/plugins/store';
-import { MutationTree, Mutation } from 'vuex';
+import { State, Mutation, MutationTree } from '@/plugins/store';
 
-const mutations: MutationTree < Mutation < any > > = {
-  setDrawer: (state: State<any>, payload: boolean) => (state.drawer = payload),
-  toggleDrawer: (state: State<any>) => (state.drawer = !state.drawer)
+export enum MutationType {
+};
+
+const mutations: MutationTree<Mutation<any>> = {
 };
 
 export default mutations;
diff --git a/src/plugins/store/modules/activity/modules/state.ts b/src/plugins/store/modules/activity/modules/state.ts
@@ -1,6 +1,11 @@
 import { articles } from '@/data/articles';
 import { State } from '@/plugins/store';
 
+export enum StateType {
+  PHOTOS = 'photos',
+  SPONSOR_ID = 'sponsorId'
+};
+
 const state: State<any> = {
   photos: articles,
   sponsorId: ''
diff --git a/src/plugins/store/modules/app/index.ts b/src/plugins/store/modules/app/index.ts
@@ -11,5 +11,6 @@ const app = {
   getters: getters
 };
 
+export const ModuleName = 'app';
 export { StateType, MutationType, ActionType, GetterType };
 export default app;
diff --git a/src/plugins/store/modules/app/modules/actions.ts b/src/plugins/store/modules/app/modules/actions.ts
@@ -9,26 +9,35 @@ export enum ActionType {
 };
 
 const actions = {
-    fetchUser: () => {
-        return AxiosHandler.requestGet('fetchUser', {
+    fetchUser: (context: ActionContext<State<any>, State<any>>) => {
+        return AxiosHandler.requestGet('fetchArticles', {
 
-        });
+        }).then(
+            (response: void | AxiosResponse<any>) => {
+                context.commit(MutationType.SET_USER, response);
+            }
+        );
     },
 
-    fetchImages: (ctx: ActionContext<State<any>, State<any>>) => {
+    fetchImages: (context: ActionContext<State<any>, State<any>>) => {
         return AxiosHandler.requestGet('fetchImages', {
             size: '1024*720'
+
         }).then(
             (response: void | AxiosResponse<any>) => {
-                ctx.commit(MutationType.SET_IMAGES, response);
+                context.commit(MutationType.SET_IMAGES, response);
             }
         );
     },
 
-    fetchArticles: () => {
+    fetchArticles: (context: ActionContext<State<any>, State<any>>) => {
         return AxiosHandler.requestGet('fetchArticles', {
 
-        });
+        }).then(
+            (response: void | AxiosResponse<any>) => {
+                context.commit(MutationType.SET_ARTICLES, response);
+            }
+        );
     }
 };
 
diff --git a/src/plugins/store/modules/home/index.ts b/src/plugins/store/modules/home/index.ts
@@ -1,7 +1,7 @@
-import state from './modules/state';
-import mutations from './modules/mutations';
-import actions from './modules/actions';
-import getters from './modules/getters';
+import state, { StateType } from './modules/state';
+import mutations, { MutationType } from './modules/mutations';
+import actions, { ActionType } from './modules/actions';
+import getters, { GetterType } from './modules/getters';
 
 const home = {
   namespaced: true, // 成為帶名稱空間的模組
@@ -11,4 +11,6 @@ const home = {
   getters: getters
 };
 
+export const ModuleName = 'home';
+export { StateType, MutationType, ActionType, GetterType };
 export default home;
diff --git a/src/plugins/store/modules/home/modules/actions.ts b/src/plugins/store/modules/home/modules/actions.ts
diff --git a/src/plugins/store/modules/home/modules/getters.ts b/src/plugins/store/modules/home/modules/getters.ts
diff --git a/src/plugins/store/modules/home/modules/mutations.ts b/src/plugins/store/modules/home/modules/mutations.ts
diff --git a/src/plugins/store/modules/home/modules/state.ts b/src/plugins/store/modules/home/modules/state.ts
