当前位置: 首页 > news >正文

Vue Vuex模块化编码

正常写vuex的index的时候如果数据太多很麻烦,如有的模块是管理用户信息或修改课程等这两个是不同一个种类的,如果代码太多会造成混乱,这时候可以使用模块化管理

原始写法

如果功能模块太多很乱

import Vue from 'vue'
import Vuex from 'vuex'
//导入VuexVue.use(Vuex)const actions = {addSum(context, value) {//context 上下文里面有commit函数 value 是组件传过来的值context.commit('AddSum', value)//获取到了数据 操作数据},//获取数据 如发起请求等
}const mutations = {AddSum(state, value) {state.sum += value//这样就完成了赋值}//操作数据
}const state = { sum: 0 }
//保存数据//暴露出去给别人使用
export default new Vuex.Store({actions, mutations, state})

模块化写法

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

如果代码逻辑特别多可以分文件细化

import Vue from "vue";
import Vuex from 'vuex'
Vue.use(Vuex)//用户信息模块
const userList =
{namespaced: true,//开启命名空间  true开启才可以怎样获取数据   ...mapState('classList',['方法名','方法名'])actions: {},  //获取数据 如发起请求等mutations:{getUserId(state, value) {state.user_id = value} //获取用户ID},  //操作数据state: { user_id: '' },// //保存数据getters: {}//计算}//班级模块
const classList =
{namespaced: true,//开启命名空间  true开启才可以怎样获取数据   ...mapState('classList',['方法名','方法名'])actions: {},  //获取数据 如发起请求等mutations: {},  //操作数据state: { class_id: '' },// //保存数据getters: {}//计算}export default new Vuex.Store({modules: { userMsg: userList, classMsg: classList }//获取userList需要从userMsg获取
})
import { mapState,mapMutations,mapActions } from 'vuex';

写入数据

 <button @click="getUserId('dpc520')"></button><!--使用map必须使用这种方法传值-->
 ...mapMutations('userMsg',['getUserId'])

读取数据

<h1>{{ user_id }}</h1>
computed: {...mapState('userMsg', ['user_id'])//第一个参数表示从vuex里的userMsg对象获取state的user_id值}

模块化原始方法 commit getters

commit

模块化使用原始方法赋值需要这样写

   <button @click="test()">原始赋值</button>

区别终于 / 号

 test() {
this.$store.commit('userMsg/getUserId', '123')}

getters

this.$store.getters['xxx/xxx']

相关文章:

Vue Vuex模块化编码

正常写vuex的index的时候如果数据太多很麻烦&#xff0c;如有的模块是管理用户信息或修改课程等这两个是不同一个种类的&#xff0c;如果代码太多会造成混乱&#xff0c;这时候可以使用模块化管理 原始写法 如果功能模块太多很乱 import Vue from vue import Vuex from vuex …...

消费者忠诚度研究:群狼调研帮您制定忠诚客户计划

在当今竞争激烈的市场环境中&#xff0c;消费者忠诚度对于企业的成功至关重要。消费者忠诚度不仅关系到企业的市场份额和盈利能力&#xff0c;还直接影响着企业的品牌形象和声誉。群狼调研作为一家专业的市场研究机构&#xff0c;专注于消费者忠诚度研究&#xff0c;为企业提供…...

接口幂等性详解

1. 什么是幂等性 幂等性指的是对同一个操作的多次执行所产生的影响与一次执行的影响相同。无论操作执行多少次&#xff0c;系统状态都应该保持一致。 在计算机科学和网络领域中&#xff0c;幂等性通常用来描述服务或操作的特性。对于RESTful API或HTTP方法&#xff0c;一个幂…...

Java操作redis常见类型数据存储

一&#xff0c;Java连接Redis 1.1 导入依赖 打开IDEA在pom.xml导入依赖 注意&#xff1a;要在dependencies标签中导入 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.9.0</version> &…...

【深度学习】pytorch——Autograd

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 深度学习专栏链接&#xff1a; http://t.csdnimg.cn/dscW7 pytorch——Autograd Autograd简介requires_grad计算图没有梯度追踪的张量ensor.data 、tensor.detach()非叶子节点的梯度计算图特点总结 利用Autograd实…...

【ARM 安全系列介绍 1 -- 奇偶校验与海明码校验详细介绍】

文章目录 奇偶校验介绍奇偶校验 python 实现奇偶校验C代码实现 海明码详细介绍 奇偶校验介绍 奇偶校验是一种错误检测方法&#xff0c;广泛应用于计算机内部以及数据通信领域。其基本原理是为了使得一组数据&#xff08;通常是一字节8位&#xff09;中的“1”的个数为偶数或奇…...

分享34个发布商会PPT,总有一款适合您

分享34个发布商会PPT&#xff0c;总有一款适合您 链接&#xff1a;https://pan.baidu.com/s/1jP9toqTZONWeDIcxvw1wxg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易。知识付费甚…...

047_第三代软件开发-日志分离

第三代软件开发-日志分离 文章目录 第三代软件开发-日志分离项目介绍日志分离用法 关键字&#xff1a; Qt、 Qml、 log、 日志、 分离 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object Language&#xff09;和 C 的强…...

ChinaSoft 论坛巡礼 | 系统与网络安全论坛

2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…...

Ubuntu Gitlab安javascript:void(‘numberedlist‘)装

原因&#xff1a; 代码越改越多&#xff0c;越难维护&#xff0c;开发代码和发布代码融为一体&#xff1b;2人以上开发&#xff0c;都会修改代码&#xff0c;修改次数一多&#xff0c;代码难以维护 其中&#xff1a;前往Gitlab官网&#xff1a;gitlab/gitlab-ce - Packages pa…...

11.4-GPT4AllTools版本已开始对小部分GPT3.5用户内测推送

OpenAI已经开始小规模推送GPT4 AllTools功能&#xff0c;部分GPT博主已经第一时间体验了此功能&#xff0c;此功能特色是整合目前的多模态功能以及文件上传和联网模块&#xff0c;无需切换&#xff0c;更要全面综合 可上传包括 PDF、数据文件在内的任意文档&#xff0c;并进行分…...

竞赛选题 深度学习手势检测与识别算法 - opencv python

文章目录 0 前言1 实现效果2 技术原理2.1 手部检测2.1.1 基于肤色空间的手势检测方法2.1.2 基于运动的手势检测方法2.1.3 基于边缘的手势检测方法2.1.4 基于模板的手势检测方法2.1.5 基于机器学习的手势检测方法 3 手部识别3.1 SSD网络3.2 数据集3.3 最终改进的网络结构 4 最后…...

语言模型AI——聊聊GPT使用情形与影响

GPT的出现象征着人工智能自然语言处理技术的一次巨大飞跃。从编程助手到写作利器&#xff0c;它的身影在各个行业中越来越常见。百度【文心一言】、CSDN【C知道】等基于GPT的产品相继推出&#xff0c;让我们看到了其广泛的应用前景。然而&#xff0c;随着GPT的普及&#xff0c;…...

浅谈事件冒泡和事件捕获

事件冒泡和事件捕获分别由微软和网景公司提出&#xff0c;这两个概念都是为了解决页面中事件流&#xff08;事件发生顺序&#xff09;的问题。 <div id"div1"><div id"div2"><div id"div3">click</div></div> <…...

CSS 背景、文本、字体

CSS背景&#xff1a; CSS背景属性用于定义HTML元素的背景。CSS属性定义背景效果&#xff1a;background-color&#xff1b;background-image&#xff1b;background-repeat&#xff1b;background-attachment&#xff1b;background-position。 background-color属性定义元素…...

爬取Elastic Stack采集的Nginx内容

以下是一个简单的Go语言爬虫程序&#xff0c;用于爬取Elastic Stack采集的Nginx内容。请注意&#xff0c;这只是一个基本的示例&#xff0c;实际使用时可能需要根据具体情况进行修改和扩展。 package mainimport ("fmt""net/http""io/ioutil" )…...

python 机器学习 常用函数

一 np.random.randint "randint" 是 "random integer" 的缩写&#xff0c;表示生成随机整数。 np.random.randint 是 NumPy 库中的一个函数&#xff0c;用于生成随机整数。以下是该函数的一般语法&#xff1a; np.random.randint(low, high, size)其中…...

手写操作系统篇:环境配置

文章目录 前言C环境配置Rust环境配置Qemu安装 前言 这篇博客先配置好我们之后的开发环境&#xff0c;下载一些依赖的软件包 建议大家使用ubuntu操作系统 C环境配置 sudo apt-get update && sudo apt-get upgrade sudo apt-get install git wget build-essential gdb…...

地理信息系统原理-空间数据结构(7)

​四叉树编码 1.四叉树编码定义 四叉树数据结构是一种对栅格数据的压缩编码方法&#xff0c;其基本思想是将一幅栅格数据层或图像等分为四部分&#xff0c;逐块检查其格网属性值&#xff08;或灰度&#xff09;&#xff1b;如果某个子区的所有格网值都具有相同的值&#xff0…...

三国志14信息查询小程序(历史武将信息一览)制作更新过程03-主要页面的设计

1&#xff0c;小程序的默认显示 分为三部分&#xff0c;头部的标题、中间的内容区和底部的标签栏。点击标签可以切换不同页面&#xff0c;这是在app.json文件中配置的。代码如下&#xff1a; //所有用到的页面都需要在 pages 数组中列出&#xff0c;否则小程序可能会出现错误或…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

数据库正常,但后端收不到数据原因及解决

从代码和日志来看&#xff0c;后端SQL查询确实返回了数据&#xff0c;但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离&#xff0c;并且ai辅助开发的时候&#xff0c;很容易出现前后端变量名不一致情况&#xff0c;还不报错&#xff0c;只是单…...

CppCon 2015 学习:Simple, Extensible Pattern Matching in C++14

什么是 Pattern Matching&#xff08;模式匹配&#xff09; ❝ 模式匹配就是一种“描述式”的写法&#xff0c;不需要你手动判断、提取数据&#xff0c;而是直接描述你希望的数据结构是什么样子&#xff0c;系统自动判断并提取。❞ 你给的定义拆解&#xff1a; ✴ Instead of …...