layout1，通过vuex读取左侧菜单

Author: labnize

.babelrc

@@ -3,5 +3,8 @@
     "targets": {
       "browsers": ["last 2 versions"]
     }
-  }]]
+  }]],
+  "plugins": [
+    ["transform-object-rest-spread"]
+  ]
 }

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
     'object-curly-spacing': [2, 'always'],
     'no-undef': [1],
     'new-cap': 1,
-    'no-param-reassign': 2,
+    'no-param-reassign': 0,
     'global-require': 0,
     'no-mixed-operators': 0,
     "import/no-extraneous-dependencies": 0,

src/components/layout1.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="layout">
+    <el-container style="min-height: 100vh">
+      <el-header>
+        <div width="200px" class="logo"></div>
+      </el-header>
+      <el-container>
+        <el-aside width="200px">
+          <el-row class="tac">
+            <el-col :span="24">
+              <template v-if="menu.length">
+                <el-menu
+                  :default-active="defaultActive"
+                  class="el-menu-vertical-demo"
+                  @open="handleOpen"
+                  @close="handleClose"
+                  background-color="#383a4b"
+                  text-color="#fff"
+                  active-text-color="#ffd04b"
+                  :router="true">
+                  <template v-for="item in menu">
+                    <template v-if="item.sub">
+                      <el-submenu :index="item.key" :key="item.key">
+                        <template slot="title">
+                          <i class="el-icon-location"></i>
+                          <span>{{ item.name }}</span>
+                        </template>
+                        <el-menu-item v-for="subItem in item.sub" :index="subItem.key" :key="subItem.key">
+                          {{ subItem.name }}
+                        </el-menu-item>
+                      </el-submenu>
+                    </template>
+                    <template v-else>
+                      <el-menu-item :index="item.key" :key="item.key">
+                        <i class="el-icon-menu"></i>
+                        <span slot="title">{{ item.name }}</span>
+                      </el-menu-item>
+                    </template>
+                  </template>
+                </el-menu>
+              </template>
+            </el-col>
+          </el-row>
+        </el-aside>
+        <el-container>
+          <el-main>
+            <slot name="content"></slot>
+          </el-main>
+          <el-footer>July Design ©2017 Created by July</el-footer>
+        </el-container>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+  const operateUrl = 'claa/menulist';
+
+  export default {
+    name: 'layout',
+    data() {
+      return {
+        defaultActive: 'item1'
+      };
+    },
+
+    created() {
+      this.defaultActive = this.$route.path.split('/')[1] ? this.$route.path.split('/')[1] : 'item1';
+    },
+    mounted() {
+      this.doQuery();
+    },
+
+    computed: {
+      menu() {
+        return this.$store.state.menu.menuList;
+      }
+    },
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      doQuery() {
+        const param = {
+          loadingFlag: true,
+          url: operateUrl,
+          method: 'POST',
+          data: {
+            type: 'on'
+          }
+        };
+        this.$store.dispatch('fetch', param);
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .logo{
+
+  }
+  .el-header, .el-footer {
+    background-color: #383a4b;
+    color: #fff;
+    text-align: center;
+    line-height: 60px;
+  }
+
+  .el-aside {
+    background-color: #383a4b;
+    .el-menu{
+      border-right: 0;
+    }
+  }
+
+  .el-main {
+    background-color: #E9EEF3;
+  }
+
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+
+</style>

src/main.js

@@ -9,6 +9,8 @@ import item2 from 'pages/item2/item2';
 import item31 from 'pages/item3/option1';
 import item32 from 'pages/item3/option2';
 
+import store from './store';
+
 Vue.use(ElementUI);
 Vue.use(VueRouter);
 /* eslint-disable no-new */
@@ -27,6 +29,7 @@ const router = new VueRouter({
 new Vue({
   el: '#app',
   router,
+  store,
   template: `
     <div id="app">
       <router-view class="view"></router-view>

src/pages/item1/item1.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-  import Layout from 'components/layout';
+  import Layout from 'components/layout1';
   import Modal from 'components/modal';
 
   export default {

src/store/index.js

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import menu from './modules/menu';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  modules: {
+    menu
+  }
+});
+
+export default store;

src/store/modules/menu.js

@@ -0,0 +1,28 @@
+import Axios from 'util/axios';
+
+const menu = {
+  state: {
+    menuList: []
+  },
+  mutations: {
+    CHANGE_MENULIST: (state, list) => {
+      state.menuList = list;
+    }
+  },
+  actions: {
+    fetch({ commit }, param) {
+      const params = {
+        ...param,
+        successFn(data) {
+          if (data.list && data.list.length) {
+            commit('CHANGE_MENULIST', data.list);
+          }
+        }
+      };
+      console.log(params);
+      Axios.fetch(params);
+    }
+  }
+};
+
+export default menu;