From c5c268d36eb81cb1882fcbc9671d830c8e3fe6af Mon Sep 17 00:00:00 2001
From: hukai <huzhengen@163.com>
Date: Tue, 6 Jul 2021 15:45:47 +0800
Subject: [PATCH] toggle sidebar

---
 src/components/Hamburger/index.vue | 12 +++++-------
 src/layout/Sidebar/index.vue       |  5 +++++
 src/store/modules/app/getters.ts   |  5 +++++
 src/store/modules/app/index.ts     | 15 +++++++++++++++
 src/store/modules/app/mutations.ts |  7 +++++++
 src/store/modules/app/state.ts     |  7 +++++++
 src/store/modules/index.ts         |  2 ++
 src/store/types.ts                 |  2 ++
 8 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 src/store/modules/app/getters.ts
 create mode 100644 src/store/modules/app/index.ts
 create mode 100644 src/store/modules/app/mutations.ts
 create mode 100644 src/store/modules/app/state.ts

diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 0be9838..fddafb9 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="app-hamburger" @click="toggleSiderBar">
-    <MenuUnfoldOutlined v-if="sidebarCollapsed" />
+    <MenuUnfoldOutlined v-if="!sidebarCollapsed" />
     <MenuFoldOutlined v-else />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
-// import { useStore } from 'vuex'
+import store from '@/store'
 
 export default defineComponent({
   name: 'Hamburger',
@@ -18,12 +18,10 @@ export default defineComponent({
   },
 
   setup() {
-    // const store = useStore()
-    // const sidebarCollapsed = computed(() => store.state.app.sidebarCollapsed)
-    const sidebarCollapsed = false
+    const sidebarCollapsed = computed(() => store.state.app.sidebarCollapsed)
 
     const toggleSiderBar = () => {
-      // store.commit('app/TOGGLE_COLLAPSED')
+      store.commit('app/TOGGLE_COLLAPSED', sidebarCollapsed.value)
     }
 
     return {
diff --git a/src/layout/Sidebar/index.vue b/src/layout/Sidebar/index.vue
index 18be968..4f86a4e 100644
--- a/src/layout/Sidebar/index.vue
+++ b/src/layout/Sidebar/index.vue
@@ -1,5 +1,6 @@
 <template>
   <a-layout-sider
+    v-if="showSider"
     :collapsed="collapsed"
     :width="200"
     :collapsed-width="100"
@@ -52,6 +53,7 @@
 
 <script lang="ts">
 import { mapState } from 'vuex'
+import store from '@/store'
 
 export default {
   data() {
@@ -67,6 +69,9 @@ export default {
     collapsed() {
       return !(Array.isArray(this.active.lv1.children) && this.active.lv1.children.length)
     },
+    showSider() {
+      return store.state.app.sidebarCollapsed
+    },
   },
   methods: {
     randomChildren(num = 1) {
diff --git a/src/store/modules/app/getters.ts b/src/store/modules/app/getters.ts
new file mode 100644
index 0000000..b9e74df
--- /dev/null
+++ b/src/store/modules/app/getters.ts
@@ -0,0 +1,5 @@
+import { IAppState } from './state'
+
+export const getters = {
+  sidebarCollapsed: (state: IAppState) => state.sidebarCollapsed,
+}
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
new file mode 100644
index 0000000..1341a95
--- /dev/null
+++ b/src/store/modules/app/index.ts
@@ -0,0 +1,15 @@
+/**
+ * App信息模块
+ */
+import { state } from './state'
+import { mutations } from './mutations'
+// import { actions } from './actions'
+import { getters } from './getters'
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  // actions,
+  getters,
+}
diff --git a/src/store/modules/app/mutations.ts b/src/store/modules/app/mutations.ts
new file mode 100644
index 0000000..42138ec
--- /dev/null
+++ b/src/store/modules/app/mutations.ts
@@ -0,0 +1,7 @@
+import { IAppState } from './state'
+
+export const mutations = {
+  TOGGLE_COLLAPSED: (state: IAppState, sidebarCollapsed: boolean) => {
+    state.sidebarCollapsed = !sidebarCollapsed
+  },
+}
diff --git a/src/store/modules/app/state.ts b/src/store/modules/app/state.ts
new file mode 100644
index 0000000..b637b0c
--- /dev/null
+++ b/src/store/modules/app/state.ts
@@ -0,0 +1,7 @@
+export type IAppState = {
+  sidebarCollapsed: boolean
+}
+
+export const state: IAppState = {
+  sidebarCollapsed: true,
+}
diff --git a/src/store/modules/index.ts b/src/store/modules/index.ts
index dc4e358..b2aa6e2 100644
--- a/src/store/modules/index.ts
+++ b/src/store/modules/index.ts
@@ -10,7 +10,9 @@ Object.keys(allModules).forEach((path) => {
 // /********************************自动导包 end********************************/
 //
 import user from './user'
+import app from './app'
 
 export default {
   user,
+  app,
 }
diff --git a/src/store/types.ts b/src/store/types.ts
index ce2c9ed..ba26012 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -1,7 +1,9 @@
 import { IUserState } from '@/store/modules/user/state'
+import { IAppState } from '@/store/modules/app/state'
 
 export interface IStore {
   user: IUserState
+  app: IAppState
 }
 
 declare global {
-- 
Gitee