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 进行组件之间的通讯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。