【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——⑦项目开发基于vuex实现顶栏组件操控左侧导航栏收起

最新推荐文章于 2024-08-12 11:12:01 发布

小蛋蛋呐

最新推荐文章于 2024-08-12 11:12:01 发布

阅读量780

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_56905968/article/details/128368818

版权

本文介绍了如何在Vue项目中利用Vuex管理顶栏组件的状态，包括左侧菜单的收起与展开，以及与之相关的样式调整。通过组件化和模块化设计，结合Vue CLI和Vuex 3.x，实现了一键控制菜单折叠的交互效果。

摘要由CSDN通过智能技术生成

1、顶栏常单独形成一个组件，因此在src文件夹下的components文件夹中新建CommonHeader.vue

相关代码如下：【注意，由于顶栏的左侧区域和右侧区域经常分装，以实现不同功能】

<template>
    <div class="header-container">
        <!-- 顶栏的左侧内容 -->
        <div class="l-content"></div>
        <!-- 顶栏的右侧内容 -->
        <div class="r-content"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    }
}

</script>

2、在Main.vue中注册CommonHeader.vue组件并使用

打开页面，并根据UI修改样式

3、下面介绍本节重点：基于Vuex实现顶栏按钮实现左侧导航栏收起

首先进行准备工作，搜索vuex官方文档

打开官网，选择vuex为3.x版本【本项目基于vue2实现开发】

Vuex 是 Vue.js 应用程序的状态管理模式 + 库。它充当应用程序中所有组件的集中存储。

4、向项目中引入vuex【注意：一定要确定版本的正确性！可打开npm官网确定vuex的版本号】打开vscode终端，向指定目录下输入如下命令：

npm i vuex@3.6.2

安装完成

在src文件夹下新建store文件夹，创建index.js文件，代码如下：

/* eslint-disable no-unused-vars */
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'


//将vuex进行全局部署
Vue.use(Vuex)

//创建vuex的示例
//引入tab后，将该实例对外暴露
export default new Vuex.Store({
    modules: {
       
    }
})

//注意，该部分内容最终要由main.js挂载到vue实例上

由于左侧菜单是单独部分的数据，而顶栏也是，因此根据模块化的思想需要将两部分数据进行封装管理，需要再在store文件夹下新建tab.js文件。

根据【完整项目搭建】④和⑥介绍可知，左侧导航栏菜单的收起是通过操作isCollapse实现的

(62条消息) 【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——④项目开发基于vue-router【嵌套路由】实现导航栏切换效果_小蛋蛋呐的博客-CSDN博客

(62条消息) 【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——⑥项目开发基于实现菜单单击跳转功能_小蛋蛋呐的博客-CSDN博客

现在需要在CommonHeader组件中点击icon图标，实现左菜单导航栏收起功能，则需在store中的tab.js设置控制菜单收起展开的isCollapse字段，并在CommonAside.vue和CommonHeader.vue组将中进行引用，综上tab.js文件的代码如下：

export default {
    state: {
        //在CommonAside通过操控collapse属性实现左侧菜单导航栏的收起和展开
        //isCollapse是collapse属性的属性值
        isCollapse: false
    },
    mutations: {
        //修改菜单展开收起的方法
        collapseMenu(state) {
            state.isCollapse = !state.isCollapse;
        }
    }
}

tab.js文件写好后，在store文件夹下的index.js文件中引用

/* eslint-disable no-unused-vars */
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab.js'

//将vuex进行全局部署
Vue.use(Vuex)

//创建vuex的示例
//引入tab后，将该实例对外暴露
export default new Vuex.Store({
    modules: {
        tab
    }
})

//注意，该部分内容最终要由main.js挂载到vue实例上

将vuex实例对外暴露后，还需要在main.js文件中进行挂载

import Vue from 'vue'
import App from './App.vue'

//全局引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//引入iconfont字体图标
import "./assets/font/iconfont.css"

//引入router
import router from './router'

//引入store
import store from './store'

//对element ui进行全局注册
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')