Vuex在项目中的实际应用

简介: 文章介绍了如何在Vue项目中使用Vuex来实现关怀模式(字体和界面元素放大),通过在Vuex的Store中定义状态、存储和获取状态,并动态改变组件的样式来实现这一功能。

前言

最近让我搞一个关怀版本的系统。纯纯前端、无语死。就是整个系统的字体还有框框啥的变大。简单暴力的做法就是重新写一套样式咯,这不纯纯累死人啊。琢磨了一下,如果可以保存关怀版的一个标志,然后全部组件都可以获取到该标志。通过该标志,然后动态的指定类的样式。 Vue中的Vuex就可以达到保存状态,全部组件可以访问到。然后动态设置class的样式也可以。

1、Store中定义

在这里插入图片描述
在这里插入图片描述

2、存储状态

这里需要注意一点

this.$store.commit('CareVersion/isCareVersion,'true),现在就是要在方法前面指定模块名,这个是要在namespaced开启true才会生效,
this.$store.state.CareVersion.isCareVersionShow,访问store属性,指定CareVersion下的isCareVersionShow属性。

在这里插入图片描述

3、获取状态

在这里插入图片描述

4、动态改变样式

在这里插入图片描述

在这里插入图片描述

资料参考1:Vuex中模块化后this. s t o r e . c o m m i t 和 t h i s . store.commit和this. store.commit和this.store.state的用法

资料参考2:Vue.js动态改变样式

相关文章
|
存储 JavaScript
Vue2(状态管理Vuex)
Vue2(状态管理Vuex)
【vue2项目总结】—— vuex相关
【vue2项目总结】—— vuex相关
55 0
|
1月前
|
JavaScript 前端开发 数据管理
vue2知识点:理解vuex、安装vuex、搭建vuex环境
vue2知识点:理解vuex、安装vuex、搭建vuex环境
32 0
|
3月前
|
存储 资源调度 JavaScript
学习使用Vuex
【8月更文挑战第5天】学习使用Vuex
49 5
|
4月前
|
存储 开发框架 JavaScript
在Vue3项目中使用pinia代替Vuex进行数据存储
在Vue3项目中使用pinia代替Vuex进行数据存储
|
4月前
|
存储 缓存 JavaScript
VUEX 的使用学习一
VUEX 的使用学习一
43 0
|
6月前
|
JavaScript 测试技术 开发者
Vue 3 Vuex:构建更强大的状态管理系统
Vue 3 Vuex:构建更强大的状态管理系统
95 1
|
6月前
|
存储 前端开发 JavaScript
vuex项目实例
vuex项目实例
vuex项目实例
|
存储 JavaScript 前端开发
Vuex的学习
Vuex的学习
100 0
|
存储 JavaScript 安全
简介vuex和pinia
简介vuex和pinia