vue3+element plus使用vuex实现折叠导航菜单

14天前   阅读:117   分类:前端    标签: Vue

vuex简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

一、安装vuex

npm install vuex -S

二、创建vuex文件夹

在src目录下创建store文件夹,并创建index.js文件,编写如下代码

import { createStore } from "vuex";
export default createStore({
    state: {
        isCollapse : true
    },
    mutations: {
        updateIsCollapse(state, payload){
            state.isCollapse = !state.isCollapse
        }
    }
})

三、引入vuex

打开main.js

import store from './store/index.js'
const app = createApp(App)
app.use(store)

四、菜单页面使用

1、菜单部分代码

<template>
    <el-aside :width="$store.state.isCollapse ? '180px' : '64px'">
        <el-menu
        default-active="2"
        class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse="!$store.state.isCollapse" :collapse-transition = "false"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>文章</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">文章管理</el-menu-item>
            <el-menu-item index="1-2">文章分类</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="1-3">文章标签</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        
      </el-menu>
    </el-aside>
</template>

2、按钮页面

<el-button :size="small" plain @click="handleCollapse">
        <el-icon :size="size" :color="color">
        <Menu />
      </el-icon>
</el-button>
<script>
import { defineComponent } from 'vue';
import { useStore } from 'vuex'
export default defineComponent({
    setup(){
        let store = useStore()
        let handleCollapse = () =>{
            // 调用vuex中的mutations
            store.commit('updateIsCollapse')
        }
        return {
            handleCollapse,
        };
    }
})
</script>

五、效果展示

折叠效果

【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/1093.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×