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

相关文章
|
6月前
|
存储 JavaScript 开发者
Pinia和Vuex的区别
Pinia和Vuex的区别
1548 0
|
15天前
|
存储 JavaScript API
Vuex 和 Pinia 的区别
【10月更文挑战第18天】Vuex 和 Pinia 都有各自的优势和适用场景。Vuex 适合较为大型和复杂的项目,强调严格的架构和流程;而 Pinia 则更适合中小型项目以及对灵活性和简洁性有更高要求的开发者。你可以根据项目的具体需求和个人喜好来选择使用哪一个状态管理库。
346 59
|
28天前
|
JavaScript 前端开发 数据管理
vue2知识点:理解vuex、安装vuex、搭建vuex环境
vue2知识点:理解vuex、安装vuex、搭建vuex环境
27 0
|
3月前
|
存储 资源调度 JavaScript
学习使用Vuex
【8月更文挑战第5天】学习使用Vuex
49 5
|
4月前
|
存储 开发框架 JavaScript
在Vue3项目中使用pinia代替Vuex进行数据存储
在Vue3项目中使用pinia代替Vuex进行数据存储
|
4月前
|
存储 缓存 JavaScript
VUEX 的使用学习一
VUEX 的使用学习一
41 0
|
6月前
|
存储 JavaScript
vuex和pinia区别
vuex和pinia区别
408 0
|
6月前
|
存储 JavaScript 前端开发
一起学习Vuex 4.0的状态管理(Vite)
一起学习Vuex 4.0的状态管理(Vite)
90 0
|
JavaScript
vue3项目中怎么vuex
以下是Vue 3项目中如何使用Vuex: 安装Vuex
67 0
|
存储 JavaScript 前端开发
Vuex的学习
Vuex的学习
99 0