使用vuex 进行组件之间的通讯

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 = falseVue.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

使用vuex 进行组件之间的通讯相关推荐

Vue组件之间的通讯方式——父传子、子传父、兄弟组件间的通讯
目录一.父传子 1.props 属性传递 2.方法传递 3. $parent获取方法和属性二.子传父 1. 属性传递 2 .通过$refs主动获取子组件方法和属性 3 .通过$children主动 ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
Angular 父子组件之间的通讯，自定义组件实现星星评分功能
Angular组件父子间通讯方法: OnInit(), Input() 通过输入属性和输出属性,通过EventEmitter 向父组件发射改变值示例一个星星打分的组件: 组件描述:1.根据分数值显示 ...
Vue中同级组件之间的通讯方法（详解）
比如我想在userVue.vue中调用headVue中的方法 1.首先先创建一个avatarRealTime.js,来打开组件之间的通讯接口 avatarRealTime中代码如下:引入vue,暴露出 ...
vue根据url获取内容axios_vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据...
在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...
Guava关于JAVA中系统组件之间交互通讯（非线程之间通讯）
2019独角兽企业重金招聘Python工程师标准>>> Guava EventBus组件 // Class is typically registered by the contai ...
前端学习（2777）：组件之间的通讯方式
父传子子传父兄弟
前端学习（2371）：组件之间的通讯方式
前端学习（2370）：组件之间的通讯方式

使用vuex 进行组件之间的通讯

demo界面展示

项目结构

主要代码结构

使用vuex 进行组件之间的通讯相关推荐

最新文章

热门文章