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动态改变样式

相关文章
|
1月前
|
存储 资源调度 JavaScript
学习使用Vuex
【8月更文挑战第5天】学习使用Vuex
38 4
|
2月前
|
存储 开发框架 JavaScript
在Vue3项目中使用pinia代替Vuex进行数据存储
在Vue3项目中使用pinia代替Vuex进行数据存储
|
2月前
|
存储 缓存 JavaScript
VUEX 的使用学习一
VUEX 的使用学习一
29 0
|
3月前
|
存储 JavaScript
|
4月前
|
存储 前端开发 JavaScript
vuex项目实例
vuex项目实例
vuex项目实例
|
9月前
vuex
vuex
45 0
|
JavaScript
vue3项目中怎么vuex
以下是Vue 3项目中如何使用Vuex: 安装Vuex
63 0
|
存储 JavaScript 前端开发
Vuex的学习
Vuex的学习
89 0
|
存储 JavaScript 安全
简介vuex和pinia
简介vuex和pinia
|
缓存 JavaScript
一文解析Pinia和Vuex,带你全面理解这两个Vue状态管理模式(下)
一文解析Pinia和Vuex,带你全面理解这两个Vue状态管理模式(下)
177 0