SpringBoot + Spring Cloud +Vue 管理系统前端搭建(七、管理应用状态)

     最近公司的事情比较多,所以好久没有更新了,今天我们写一下这个Vue持久化

      在很多应用场景下,我们需要在组件之间共享状态,还有一些全局变量,我们需要在很多地方用的,这就存在了共享。Vuex是一个专门为vue.js应用开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

        Vuex官网:https://vuex.vuejs.org/zh/

安装步骤

1、安装依赖

        执行命令: npm add vuex
        

2、添加store

        在src目录下新建一个store目录,专门管理应用状态,在store目录下新建index.js

和modules目录,在modules目录下新建app.js

      index.js:在index.js中引入vuex并统一组织导入和管理子模块。

      app.js : 属于应用内的全局性的配置,比如主题色、导航栏收缩状态等;

  index.js

import Vue from 'vue'

import vuex from 'vuex'

Vue.use(vuex);

// 引入子模块

import app from './modules/app'

const store = new vuex.Store({

modules: {

app: app

}

})

export default store

app.js

export default {

state: {

appName: "Mango Platform", // 应用名称

themeColor: "#14889A", // 主题颜色

oldThemeColor: "#14889A", // 上一次主题颜色

collapse:false, // 导航栏收缩状态

menuRouteLoaded:false // 菜单和路由是否已经加载

},

getters: {

collapse(state){// 对应着上面state

return state.collapse

}

},

mutations: {

onCollapse(state){ // 改变收缩状态

state.collapse = !state.collapse

},

setThemeColor(state, themeColor){ // 改变主题颜色

state.oldThemeColor = state.themeColor

state.themeColor = themeColor

},

menuRouteLoaded(state, menuRouteLoaded){ // 改变菜单和路由的加载状态

state.menuRouteLoaded = menuRouteLoaded;

}

},

actions: {

}

}

3、引入store

        在main.js中引入store,如下图:

         到此,我们已经完成了store的配置,接下来就是使用了。

4、使用

        我们这里以头部的headBar.vue的收缩状态使用为例,其他页面同理

        首先通过computed技算属性引入store属性,这样就可以直接在页面通过collapse应用状态值了,如果不嫌长,也可以不用计算属性,直接在页面中通过state=>state.app.collapse引用

        

computed:{

...mapState({

collapse: state=>state.app.collapse

})

}

然后在页面通过collapse的状态值来绑定不同的宽度样式

<el-menu-item index="1" @click="onCollapse"><hamburger :isActive="collapse"></hamburger></el-menu-item>

 收缩组件

        在src目录下新建components目录,并在目录下创建导航栏收缩展开组件Hamburger

组件是用SVG绘制的,绘制根据isActive状态决定是否旋转、显示、收缩和展开状态不同的图像

在头部区域headBar中引入hamburger,并将自身isActive状态跟收缩状态collapse绑定,

我们这里已经绑定了,所以就不用重复操作了。

单击导航栏收缩组件区域的响应函数,设置导航收缩状态到Store

// 折叠导航栏

onCollapse: function() {

this.$store.commit('onCollapse')

},

到此我们已经完成了整体配置,下面进行测试。

页面测试

启动项目在浏览器访问:http://localhost:8080/#/login

点击登录进入主页面

点击一下收缩按钮,可以看到头部折叠回去了,再点击一下展开

因为代码比较多,所以没有粘贴全,有需要的请私信博主。

好啦,我们已经完成了,管理应用的状态,看完记得点赞哦!

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值