配置状态机

kuangshp · kuangshp · commit ebd9a48214d2 · 2020-06-01T11:36:15.000+08:00
diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,23 @@
+import Menus from './menus';
+
+const components = {
+  Menus,
+};
+
+const install = (Vue) => {
+  Object.keys(components).forEach((component) =>
+    Vue.component(component, components[component]),
+  );
+};
+
+const API = {
+  install,
+  ...components,
+};
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default API;
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
@@ -22,23 +22,16 @@
 
 import AppHeader from './header/Index.vue';
 import Sidebar from './sidebar/Index.vue';
-
+import { mapActions } from 'vuex';
 export default {
   components: {
     AppHeader,
     Sidebar,
+  },
+  methods: {
+    ...mapActions(['sidebarOpened'])
   }
 }
-// @Component({
-//   components: {
-//     AppHeader,
-//     Breadcrumb,
-//     Sidebar,
-//   },
-// })
-// export default class Layout extends Vue {
-//   @Getter('viewStore/sidebarOpened') private sidebarOpened!: IViewState;
-// }
 </script>
 
 <style lang="scss">
diff --git a/src/layout/header/Index.vue b/src/layout/header/Index.vue
@@ -6,7 +6,7 @@
     <!-- 头部切换左侧菜单 -->
     <div
       class="menus"
-      @click="toogleSidebar"
+      @click="toggleSidebar"
     >
       <i class="fas fa-bars"></i>
     </div>
@@ -50,7 +50,7 @@ export default {
       storage.removeItem(currentUser);
       this.$router.push({ name: 'login' });
     },
-    ...mapActions(['toogleSidebar'])
+    ...mapActions(['toggleSidebar'])
   },
   mounted () {
     this.username = storage.getItem(currentUser);
diff --git a/src/layout/index.js b/src/layout/index.js
@@ -0,0 +1,2 @@
+import Layout from './Layout.vue';
+export default Layout;
diff --git a/src/main.js b/src/main.js
@@ -18,6 +18,11 @@ import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
 /******************************** 引入elementUi组件库 end   ********************************/
 
+// 配置自定义组件
+// 使用自己定义的组件
+import components from '@/components';
+Vue.use(components);
+
 Vue.config.productionTip = false;
 
 new Vue({
diff --git a/src/store/index.js b/src/store/index.js
@@ -1,15 +1,25 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+const path = require('path');
 
+import { viewStore } from './view';
 Vue.use(Vuex);
 
+/********************************自动导包 start********************************/
+const file = require.context('./modules', true, /\.ts/);
+const modules = {};
+file.keys().forEach((key) => {
+  const name = path.basename(key, '.js');
+  modules[name] = file(key).default || file(key);
+});
+/********************************自动导包 end********************************/
+
+const debug = process.env.NODE_ENV !== 'production';
+
 export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
+  strict: debug,
   modules: {
-  }
-})
+    viewStore,
+    ...modules,
+  },
+});
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
@@ -0,0 +1,4 @@
+export const OPEN_SIDEBAR = 'OPEN_SIDEBAR'; // 打开侧边栏
+export const CLOSE_SIDEBAR = 'CLOSE_SIDEBAR'; // 关闭侧边栏
+export const SET_TITLE = 'SET_TITLE';
+export const SET_SIDE_MENU = 'SET_SIDE_MENU'; // 设置左侧菜单
diff --git a/src/store/view.js b/src/store/view.js
@@ -0,0 +1,46 @@
+import * as types from './mutation-types';
+const state = {
+  sidebarOpened: true,
+  title: '主页',
+  menuList: [],
+};
+
+const getters = {
+  // tslint:disable-next-line:no-shadowed-variable
+  sidebarOpened: (state) => state.sidebarOpened,
+};
+
+const mutations = {
+  [types.OPEN_SIDEBAR] (s) {
+    s.sidebarOpened = true;
+  },
+  [types.CLOSE_SIDEBAR] (s) {
+    s.sidebarOpened = false;
+  },
+  [types.SET_TITLE] (s, title) {
+    s.title = title;
+  },
+  [types.SET_SIDE_MENU]: (s, payload) => {
+    s.menuList = payload;
+  },
+};
+
+const actions = {
+  toggleSidebar ({ state, commit }) {
+    state.sidebarOpened
+      ? commit(types.CLOSE_SIDEBAR)
+      : commit(types.OPEN_SIDEBAR);
+  },
+
+  setTitle ({ commit }, params) {
+    commit(types.SET_TITLE, params);
+  },
+};
+
+export const viewStore = {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};
diff --git a/src/views/shared/app/Index.vue b/src/views/shared/app/Index.vue
@@ -4,5 +4,10 @@
   </div>
 </template>
 
+<script>
+export default {
+
+}
+</script>
 <style lang="scss">
 </style>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+import Layout from './Layout.vue';`
	`2`	`+export default Layout;`