Modulized VUEX stores and changed to namspaced states

Author: anotherKyleFrom1994

src/components/home/feed/Feed.ts

@@ -9,7 +9,7 @@ export default class Feed extends Vue {
   private layout: number[] = [2, 2, 1, 2, 2, 3, 3, 3, 3, 3, 3];
   private page: number = 1;
 
-  @State('articles') articles!: IArticle[];
+  @namespace('app').State('articles') articles!: IArticle[];
 
   get pages() {
     return Math.ceil(this.articles.length / 11);

src/components/home/newest_posts/NewestPosts.ts

@@ -4,5 +4,5 @@ import { IArticle } from '@/data/articles';
 
 @Component({})
 export default class NewestPosts extends Vue {
-  @State('articles') articles!: IArticle[];
+  @namespace('app').State('articles') articles!: IArticle[];
 };

src/components/home/tags/Tags.ts

@@ -3,5 +3,5 @@ import { namespace, State, Getter } from 'vuex-class';
 
 @Component({})
 export default class Tags extends Vue {
-  @Getter('categories') categories!: any;
+  @namespace('app').Getter('categories') categories!: any;
 };

src/pages/generic/drawer/Drawer.ts

@@ -3,9 +3,9 @@ import { namespace, State, Getter, Mutation } from 'vuex-class';
 
 @Component({ name: 'CoreDrawer' })
 export default class Drawer extends Vue {
-  @Getter('links') links: any;
-  @State('drawer') drawer: any;
-  @Mutation('setDrawer') setDrawer: any;
+  @namespace('app').Getter('links') links: any;
+  @namespace('app').State('drawer') drawer: any;
+  @namespace('app').Mutation('setDrawer') setDrawer: any;
 
   private onClickListItem(e: any, item: any) {
     e.stopPropagation();

src/pages/generic/toolbar/Toolbar.ts

@@ -3,8 +3,8 @@ import { namespace, State, Getter, Mutation } from 'vuex-class';
 
 @Component({})
 export default class Toolbar extends Vue {
-  @Getter('links') links!: any;
-  @Mutation('toggleDrawer') toggleDrawer!: any;
+  @namespace('app').Getter('links') links!: any;
+  @namespace('app').Mutation('toggleDrawer') toggleDrawer!: any;
 
   private onClickButton(e: Event, item: any) {
     e.stopPropagation();

src/plugins/store/actions.ts

@@ -1,18 +1,23 @@
 import Vue from 'vue';
 import Vuex, { StoreOptions } from 'vuex';
-import { state } from './state';
-import { mutations } from './mutations';
-import { actions } from './actions';
-import { getters } from './getters';
+import app from './modules/app';
 
+// register VUEX
 Vue.use(Vuex);
 
 let opt: StoreOptions < any > = {
-  state: state,
-  mutations: mutations,
-  actions: actions,
-  getters: getters,
-  strict: true
+  // strict mode
+  strict: true,
+
+  // module states
+  modules: { app },
+
+  // root states
+  state: {},
+  mutations: {},
+  actions: {},
+  getters: {}
+
 };
 
 export default new Vuex.Store(opt);

src/plugins/store/index.ts

@@ -0,0 +1,14 @@
+import state from './modules/state';
+import mutations from './modules/mutations';
+import actions from './modules/actions';
+import getters from './modules/getters';
+
+const app = {
+  namespaced: true, // 成為帶名稱空間的模組
+  state: state,
+  mutations: mutations,
+  actions: actions,
+  getters: getters
+};
+
+export default app;

src/plugins/store/modules/app/index.ts

@@ -0,0 +1,8 @@
+import { Store } from 'vuex';
+import { State } from './state';
+
+const actions = {
+
+};
+
+export default actions;

src/plugins/store/modules/app/modules/actions.ts

@@ -1,13 +1,18 @@
-import { IState } from './state';
+import { State } from './state';
 import { GetterTree, Getter } from 'vuex';
 
 export interface IGetters {
   [key: string]: any
 }
 
-export const getters: GetterTree < IState, Getter < string, any > > = {
-  categories: (state: IState) => {
-    const categories: ICategory[] = [];
+export interface Category {
+  text: any;
+  to: string;
+}
+
+const getters: GetterTree < State, Getter < string, any > > = {
+  categories: (state: State) => {
+    const categories: Category[] = [];
 
     for (const article of state.articles) {
       if (
@@ -25,12 +30,9 @@ export const getters: GetterTree < IState, Getter < string, any > > = {
 
     return categories.sort().slice(0, 4);
   },
-  links: (state: IState, getters: IGetters) => {
+  links: (state: State, getters: IGetters) => {
     return state.items.concat(getters.categories);
   }
 };
 
-export interface ICategory {
-  text: any;
-  to: string;
-}
+export default getters;