【RuoYi移动端】uni-app中通过vuex的store来实现全局变量的修改和读取

news2024/11/26 2:44:31

一、在store文件中新建csjVar.js文件

const csjVar = {
  csjMess: [{aaa:"ok"},{bbb:"no"}]
}
export default csjVar

二、修改store文件中新建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import user from '@/store/modules/user'
import getters from './getters'
import csjVar from './csjVar.js'

Vue.use(Vuex)

const store = new Vuex.Store({
	modules: {
		user
	},
	state: {
		// 添加 csjVar 到 Vuex 的 state
		csjVar
	},
	mutations: {
		// 创建一个 mutation 来改变 csjMess 的值
		SET_CSJMESS(state, value) {
			state.csjVar.csjMess = value
		}
	},
	getters,
})

export default store

三、index.vue中读取和修改

<script>

	import store from '@/store'

	export default {
		data() {
			return {
				webUrl: '',
			}
		},
		methods: {

			onLoad: function(query) {

				console.log("全局变量:csj");
				var sss = this.$store.state.csjVar.csjMess;
				console.log(this.$store.state.csjVar.csjMess);
				console.log(this.$store.state.csjVar.csjMess[0].aaa);
				console.log(this.$store.state.csjVar.csjMess[1].bbb);
				
				// 遍历sss,修改每个元素的aaa和bbb属性值  	
				
				sss.forEach(item => {
					if (item.aaa) {
						item.aaa = 'Changed ' + item.aaa   // 修改aaa的值
					}
					if (item.bbb) {
						item.bbb = 'Changed ' + item.bbb  // 修改bbb的值
					}
				})
				
				 // 提交mutation来修改csjMess	
				 this.$store.commit('SET_CSJMESS', sss)
				
				console.log(this.$store.state.csjVar.csjMess[0].aaa);
				console.log(this.$store.state.csjVar.csjMess[1].bbb);

			},

		}
	}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/978733.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

对于array的.toLocaleString()与.flat()区别

最近都使用到这两个方法&#xff0c;对于array。记录下具体区别 先是他们的简介,我这里用的就是string的.toLocaleString() &#xff0c;因为array的就是分别去调用里面的.toLocaleString() 在拼接成 string.toLocaleString() string[].toLocaleString()方法是一个JavaScrip…

解决Maven依赖下载问题:从阿里云公共仓库入手

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Vue 2 条件渲染

条件渲染相关的指令有哪些&#xff1f; v-if、v-else、v-else-ifv-show v-if 的作用 <div v-if"expression"></div>v-if 根据表达式 expression 返回的值是否为 truthy 来决定其内容是否被渲染。 Vue还实现了 v-else 和 v-else-if&#xff1a; <d…

北斗提供关键技术支撑,车辆智能监管将迎来广阔发展前景

随着车辆数量的快速增长和道路交通压力的持续增加&#xff0c;如何保障交通安全和提升出行效率成为了亟待解决的问题。而车辆智能监管作为一种基于现代信息技术的管理方式&#xff0c;具有实时监控、数据分析和智能预警等优势&#xff0c;可以提高交通管理的精细化水平&#xf…

ClickHouse进阶(九):Clickhouse数据查询-3

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术,IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &#x1f4cc;订阅…

node socket.io

装包&#xff1a; yarn add socket.io node后台&#xff1a; const express require(express) const http require(http) const socket require(socket.io) const { getUserInfoByToken } require(../../utils/light/tools)let app express() const server http.createS…

武汉芯源半导体CW32F030系列MCU在电焊机的应用

随着工业技术的发展&#xff0c;单片机在许多领域都发挥了重要的作用。在电焊机中应用单片机&#xff0c;通过编写特定的程序&#xff0c;可以实现自动化控制、提高焊接质量和效率。 电焊机是一种用于金属焊接的设备&#xff0c;利用电弧热将金属熔化实现焊接。电焊机主要由电源…

Flutter实现CombineExecutor进行多个异步分组监听,监听第一个异步执行的开始和最后一个异步执行结束时机。

1.场景 我们在调用接口时&#xff0c;很多时候会同时调用多个接口&#xff0c;接口都是异步执行&#xff0c;我们很难知道调用的多个接口哪个会最后执行完成&#xff0c;我们有时候需要对最后一个接口执行完成的时机监听&#xff0c;所以基于该需求&#xff0c;设计了CombineE…

反序列化漏洞复现(typecho)

文章目录 执行phpinfogetshell 执行phpinfo 将下面这段代码复制到一个php文件&#xff0c;命名为typecho_1.0-14.10.10_unserialize_phpinfo.php&#xff0c;代码中定义的类名与typecho中的类相同&#xff0c;是它能识别的类&#xff1a; <?php class Typecho_Feed{const…

IPv6改造深化之路

01 IPv6改造问题及整体改造思路 随着“十四五”期间国家政策对IPv6深化改造及规模部署的推动&#xff0c;在IPv6改造过程中出现了越来越多的系统性问题&#xff0c;如图1所示。 图1 关于IPv6改造的各种疑问所有跨设备通信的IT软硬件系统均需要处理IP地址&#xff0c;各领域均需…

LeetCode —— 复写零(双指针)

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目解析 将数组中出现的每个零复写一遍&#xff0c;然后将其他元素向右平移&#xff0c;数组长度不能改变。 法一&#xff1a;使用额外空间的做法 class Solution { public:void duplica…

以指标管理为抓手,亿信华辰助力锦州银行打造全行级数据应用

随着金融数字化转型的持续深入&#xff0c;数据智能的业务化应用等正逐步受到行业关注。锦州银行携手亿信华辰&#xff0c;开展全行级指标管理体系建设&#xff0c;实现指标数据统一管理、统一标准、统一来源、统一汇总、统一加工、统一呈现&#xff0c;以及持续推动基础数据治…

Day56|动态规划part16:647. 回文子串、516. 最长回文子序列、动态规划总结篇

647. 回文子串 leetcode链接&#xff1a;力扣题目链接 视频链接&#xff1a;动态规划&#xff0c;字符串性质决定了DP数组的定义 | LeetCode&#xff1a;647.回文子串 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。回文字符串 是正着读和倒过…

Mysql--技术文档--索引-《索引为什么查找数据快?》-超底层详细说明索引

索引的概念 在MySQL中&#xff0c;索引是一种数据结构&#xff0c;它被用于快速查找、读取或插入数据。索引能够极大地提高数据库查询的速度。 索引的工作方式类似于图书的索引。如果你想在图书馆找到一本书&#xff0c;你可以按照书名进行查找。书名就像是一个索引&#xf…

0012Java程序设计-springboot基于微信小程序的校园智慧帮系统的设计与实现

摘要目录相关技术2.1 MySQL数据库2.2 SpringBoot框架2.3 uniapp框架2.4 B/S架构 系统设计系统实现开发环境 摘要 随着移动互联网高速发展&#xff0c;手机、移动智能终端设备在生活中有着越来越重要的地位。在高校推崇以人为本的今天&#xff0c;也逐渐重视“移动互联网”技术…

微信小程序集成腾讯im,会话列表数据过多(长列表),卡顿问题的解决

说明 我这边用小程序集成im&#xff0c;然后结合公司的需求&#xff0c;做了一个聊天的小程序&#xff0c;在测试上线的时候没有问题&#xff0c;结果到客户那边&#xff0c;因为他们聊天的人多&#xff0c;会话列表达到了300多条&#xff0c;然后点击会话列表&#xff0c;进入…

【字符串匹配】暴力匹配算法

​ 一、暴力匹配算法原理 暴力匹配算法&#xff0c;也称为朴素字符串匹配算法&#xff0c;是一种简单但不高效的字符串匹配方法。它的原理非常直观&#xff0c;其主要思想是逐个字符地比较文本串和模式串&#xff0c;从文本串的每个可能的起始位置开始&#xff0c;依次检查是…

ESD实时监控监测系统通常包括哪些功能

ESD实时监控监测系统是一种用于监测和控制静电放电的系统。静电放电&#xff08;Electrostatic Discharge&#xff0c;ESD&#xff09;是指由于电荷的不平衡而引起的突发放电现象&#xff0c;可能对电子元器件、设备和工作环境造成损害。 ESD实时监控监测系统通常包括以下功能…

6000+药品靶点在研数据库-<查询工具推荐>

了解在研药物靶点数据对于药物研发、靶点发现和验证、药物安全性评估以及治疗策略优化都具有重要的意义&#xff0c;可以为科学家提供有价值的信息和指导。如在研药物靶点数据为药物研发提供了重要的指导。了解当前正在研究的药物靶点可以帮助科学家了解当前研究的热点领域&…

九州未来入选“AIGC算力产业全景图”

日前&#xff0c;量子位智库发布《AIGC算力全景与趋势报告》&#xff08;以下简称报告&#xff09;&#xff0c;通过广泛调研与深度分析&#xff0c;系统性分析了AIGC算力构成、产业链条&#xff0c;进一步指出了AIGC算力的五新趋势及三大阶段发展预测。其中&#xff0c;九州未…