feat(routes): basic menu items in store

build/webpack.base.conf.js

@@ -28,7 +28,8 @@ module.exports = {
       'vue$': 'vue/dist/vue.common.js',
       'src': resolve('src'),
       'assets': resolve('src/assets'),
-      'components': resolve('src/components')
+      'components': resolve('src/components'),
+      'vuex-store': resolve('src/store')
     }
   },
   module: {

src/main.js

@@ -2,9 +2,9 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import store from './store'
 import router from './router'
 import { sync } from 'vuex-router-sync'
-import store from './store'
 
 sync(store, router)
 

src/router/index.js

@@ -4,6 +4,8 @@ import Charts from 'components/statistics/charts/Charts'
 import ProgressBars from 'components/statistics/progress-bars/ProgressBars'
 import Dashboard from 'components/dashboard/Dashboard'
 
+// import menuModule from 'vuex-store/modules/menu'
+
 Vue.use(Router)
 
 export default new Router({

src/store/getters.js

@@ -0,0 +1,5 @@
+const menuitems = state => state.menu.items
+
+export {
+  menuitems
+}

src/store/index.js

@@ -1,12 +1,16 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import menu from './modules/menu'
+import * as getters from './getters'
+
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   strict: true,  // process.env.NODE_ENV !== 'production',
+  getters,
   modules: {
-
+    menu
   },
   state: {
   },

src/store/modules/menu/index.js

@@ -0,0 +1,38 @@
+import * as types from '../../mutation-types'
+import lazyLoading from './lazyLoading'
+import statistics from './statistics'
+
+// show: meta.label -> name
+// name: component name
+// meta.label: display label
+
+const state = {
+  items: [
+    {
+      name: 'Dashboard',
+      path: '/dashboard',
+      meta: {
+        icon: 'fa-tachometer'
+      },
+      component: lazyLoading('dashboard/Dashboard')
+    },
+    statistics
+  ]
+}
+
+const mutations = {
+  [types.EXPAND_MENU] (state, menuItem) {
+    if (menuItem.index > -1) {
+      if (state.items[menuItem.index] && state.items[menuItem.index].meta) {
+        state.items[menuItem.index].meta.expanded = menuItem.expanded
+      }
+    } else if (menuItem.item && 'expanded' in menuItem.item.meta) {
+      menuItem.item.meta.expanded = menuItem.expanded
+    }
+  }
+}
+
+export default {
+  state,
+  mutations
+}

src/store/modules/menu/lazyLoading.js

@@ -0,0 +1,3 @@
+// lazy loading Components
+// https://github.com/vuejs/vue-router/blob/dev/examples/lazy-loading/app.js#L8
+export default (name, index = false) => () => import(`components/${name}${index ? '/index' : ''}.vue`)

src/store/modules/menu/statistics.js

@@ -0,0 +1,23 @@
+import lazyLoading from './lazyLoading'
+
+export default {
+  name: 'Statistics',
+  path: '/statistics',
+  meta: {
+    expanded: false
+  },
+  component: lazyLoading('charts', true),
+
+  children: [
+    {
+      name: 'Charts',
+      path: 'charts',
+      component: lazyLoading('statistics/charts/Charts')
+    },
+    {
+      name: 'ProgressBars',
+      path: 'progress-bars',
+      component: lazyLoading('statistics/progress-bars/ProgressBars')
+    }
+  ]
+}

src/store/mutation-types.js

@@ -0,0 +1 @@
+export const EXPAND_MENU = 'EXPAND_MENU'