demo界面展示
项目结构
现在想通过vuex点击header上的收起侧边栏按钮,控制侧边栏的收起与展示
说明:非父子组件通讯,通过eventbus 也可以实现:https://blog.csdn.net/lyhDream/article/details/109216889?spm=1001.2014.3001.5501
主要代码结构
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
M_header.js
<template>
<div class="m-header" style="background:red;width:100%;height:100%;">
<div style="width:300px;height:100%;background:pink;float:left;">
<div style="width:70px;height:70px;">
<i :class="iconType" style="font-size:34px;margin-top:15px;" @click="changeSpand()"></i>
</div>
</div>
<ul style="display:inline;float:right;margin-right:40px;">
<li><router-link to="/login">login</router-link></li>
<li><router-link to="/register">register</router-link></li>
</ul>
</div>
</template>
<script>
export default {
name: 'M-header',
data() {
return {
iconType : "el-icon-s-fold"
}
},
components: {
},
methods: {
changeSpand: function(){
var asideSatatus = false;
if(this.$store.getters.getAsideStatus == true){
asideSatatus = false;
this.iconType = "el-icon-s-fold";
}else{
asideSatatus = true;
this.iconType = "el-icon-s-unfold";
}
this.$store.dispatch("setAsideStatusMm", asideSatatus);
}
}
}
</script>
M_aside.vue
<template>
<div class="m-aside">
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
name: 'M-aside',
data() {
return {
};
},
methods: {
},
components: {
},
computed:{
isCollapse:function() {
// 通过vuex的getters方法来获取state里面的数据
return this.$store.getters.getAsideStatus;
}
}
}
</script>
state/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
asideStatus: false
},
getters: {
getAsideStatus(state){
return state.asideStatus;
}
},
mutations: {
setAsideStatusM(state,status){
state.asideStatus = status;
}
},
actions: {
setAsideStatusMm(context,status){
context.commit("setAsideStatusM", status);
}
},
modules: {
setAsideStatus(state,status){
state.asideStatus = status;
}
}
})
源码demo地址:https://gitee.com/liyuanhong/vue-elementtemplate