day48(vueJS)模块化管理状态 辅助函数 / 映射函数 sass库

news/2024/4/19 12:43:04/文章来源:https://blog.csdn.net/weixin_69145757/article/details/136442828

vuejs模块化管理 辅助函数 / 映射函数 sass库

  • 1.模块化管理状态
    • 2.辅助函数/映射函数
      • 3.sass库

1.模块化管理状态

1.1要点总结

1. 步骤:(模块化管理状态强调模块化开发思想)1. 按照state中不同的数据,将getters,mutations,actions,state中的内容拆分,组成单个对象,放入不同的js文件并导出,每个文件代表一条数据的管理模块(modules和plugins只能写在vuex实例化的入口文件,单数据管理模块不需要这两部分,这些单个的管理模块只需要getters,mutations,actions,state四部分即可)2. 将放置数据的js文件分别导入回vuex实例化的入口文件中,并在modules对象中注册,入口文件中保留getters,mutations,actions,state这四个部分,但空置不写内容3. 在每条数据的整合对象中加入namespaced:true;这条语句,代表开启模块化
2. 使用:(开启模块化之后state数据,同步异步方法和计算方法的获取与调用方式与未开启模块化不同)1. 同步异步方法的触发:1. this.$store.commit('模块名/触发的同步方法名',传入参数);2. this.$store.dispatch('模块名/触发的异步方法名',传入参数);2. state数据的获取:1. this.$store.state.模块名.数据名;3. 计算方法的获取:1. this.$store.getters['模块名/方法名'];

2.2代码演示

vuex入口文件.js(vuex实例化的文件)
import { createStore,createLogger } from 'vuex'
import historylist from './modules/historylist'-----导入拆分出去的模块
import tasklist from './modules/tasklist'
export default createStore({-----实例化vuexstate:{ ----------存储数据},getters:{ ----------定义计算方法( 类似于组件中的计算属性 )},mutations:{ ------------定义同步方法},actions:{ ------------定义异步方法},modules:{ --------------以模块化的方式管理state中的数据hl:historylist,tl:tasklist},plugins:[ -----------集成第三方插件 来管理state中的数据createLogger()] 
})
historylist这条数据的管理模块(这是一个js文件( 模块 ) , 负责管理historylist这个数据)
export default {---------将该条数据与其相关方法整合到一个对象中并导出namespaced:true,-----------该属性开启模块化state:{ ----------存储数据historylist:[],},getters:{ ------------定义计算方法( 类似于组件中的计算属性 )},mutations:{ ---------------定义同步方法addHistory( state, payload ){------------新增历史记录state.historylist.push(payload);}},actions:{ --------------定义异步方法}
}
tasklist这条数据的管理模块 (这是一个独立的js文件( 模块 ), 单独管理tasklist这个数据)
export default {namespaced:true,---------------开启模块化state:{ -----------存储数据tasklist:[ /* { id:1, name:'', status:false } */ ]},getters:{ -----------定义计算方法( 类似于组件中的计算属性 )totalCount(state){-------------统计任务总数return state.tasklist.length;},finishedCount(state){----------统计已完成任务数量return state.tasklist.filter(item=>item.status).length;},unfinishedCount(state){--------统计未完成任务数量return state.tasklist.filter(item=>!item.status).length;}},mutations:{ ---------------定义同步方法addTask( state, payload ){----------新增任务if( payload ){var obj = { id: state.tasklist.length + 1 ,name: payload, status:false  };-----构造一个新的任务对象state.tasklist.push( obj );--------添加新的任务对象 到任务列表中}},changeTaskStatus( state, payload ){---------------更改任务状态var task = state.tasklist.find( item=>item.id == payload );--------根据id 找到需要更改状态的任务对象if( task ){----------更改任务对象的状态task.status = !task.status;}console.log( task,payload );},deleteTask( state, payload ){---------------删除任务var i = state.tasklist.findIndex(item=>item.id == payload);-------根据id找到 需要删除的元素位置(下标)if( i != -1 ){------------------删除对应位置的任务对象state.tasklist.splice(i,1);}}},actions:{ ------------------------定义异步方法}
}模块化方法的使用
组件内
export default {data(){return {taskname:''}},methods:{handleAdd(){this.$store.commit('tl/addTask', this.taskname );-----------触发同步方法(调用同步方法),在触发方法名前加上模块名/this.$store.commit('hl/addHistory', this.taskname );---------触发同步方法(调用同步方法)this.taskname = '';-----------清空输入框的值}}
}
模块化计算方法的使用
<template><div class="summary"><span>全部( {{ $store.getters['tl/totalCount'] }} )</span>------------调用方法:$store.getters['模块名/方法名']<span>已完成( {{ $store.getters['tl/finishedCount'] }} )</span><span>未完成( {{ $store.getters['tl/unfinishedCount'] }} )</span></div>
</template>
模块化数据的使用
<template><div class="tasklist">
动态渲染任务列表( 从vuex中获取 )<div class="task" v-for="(item,index) in $store.state.tl.tasklist" :key="index">--------模块化之后只需要多加一个模块名即可:$store.state.模块名.计算方法名<div class="left"><input type="checkbox" :checked="item.status" @click="handleClick(item.id)"><span>{{item.name}}</span></div><span @click="handleDelete(item.id)">删除</span></div></div>
</template>

2.辅助函数/映射函数

2.1.要点总结—

概念与作用:映射函数又称辅助函数,是vuex提供的方法,主要用于简化组件内使用到vuex中数据是多次重复的this.$store,降低代码冗余。
原理:映射函数将简化后的写法转化成原本调用vuex实例内数据和方法的标准语法然后执行,这就是映射的过程
语法:(映射的功能相当于直接在methods与computed中定义目标方法)
未模块化时
同步方法:methods:{...mapMutations(["同步方法名","同步方法名","同步方法名",.....])}
异步方法:methods:{...mapActions(['异步方法名','异步方法名','异步方法名',....])}
state数据:computed:{...mapState(['数据名','数据名','数据名',......])}
计算方法:computed:{...mapGetters(['计算方法名','计算方法名','计算方法名',.....])}
模块化时
同步方法:methods:{...mapMutations('模块名',["同步方法名","同步方法名","同步方法名",.....])}
异步方法:methods:{...mapActions('模块名',['异步方法名','异步方法名','异步方法名',....])}
state数据:computed:{...mapState('模块名',['数据名','数据名','数据名',......])}
计算方法:computed:{...mapGetters('模块名',['计算方法名','计算方法名','计算方法名',.....])}

2.2.代码演示—

<template><div class="summary"><span>全部( {{ totalCount }} )</span>------计算方法使用方式类似于组件内的计算属性<span>已完成( {{ finishedCount }} )</span><span>未完成( {{ unfinishedCount }} )</span></div>
</template><script>
从vuex导入 辅助函数(映射函数)
import { mapGetters } from 'vuex';-------mapGetters() 从vuex中获取(映射)计算方法到组件的computed中
export default {computed:{...mapGetters('tl',['totalCount','finishedCount','unfinishedCount'])----------调用方法,在方法前添加扩展运算符,因为该方法调用返回一个对象,需要将对象内的方法展开才能使用。该方法在模块化时接受两个参数,第一个参数时方法对应的模块名,第二个参数是罗列方法名的数组;}
}
</script>
<template><div class="tasklist"><div class="task" v-for="(item,index) in tasklist" :key="index">------使用映射函数之后的state数据可以直接使用在组件模板中<div class="left"><input type="checkbox" :checked="item.status" @click="handleClick(item.id)"><span>{{item.name}}</span></div><span @click="handleDelete(item.id)">删除</span></div> </div>
</template><script>
从vuex导入 辅助函数(映射函数)
import { mapMutations,mapState } from 'vuex';------mapState() 从vuex中获取(映射)state到组件的computed中
export default {computed:{...mapState('tl',['tasklist'])},methods:{...mapMutations('tl',['changeTaskStatus','deleteTask']),handleClick(id){this.changeTaskStatus(id);----------使用映射函数之后可以直接调用映射过的方法},handleDelete(id){this.deleteTask(id);}}
}
</script>

3.sass库

3.1.要点总结–

sass库:一种用于优化css样式中选择器嵌套冗余代码的插件,他可以优化样式代码选择器嵌套冗余,并且能够体现标签的嵌套关系
Sass(Syntactically Awesome Style Sheets)是一种 CSS 预处理器,它在 CSS 的基础上增加了许多功能和特性,使得 CSS 更加强大、灵活和易于维护。
作用:1. Sass 支持嵌套规则,可以减少 CSS 代码的层级,让代码更加清晰易读;2. Sass 支持变量、函数和表达式,可以方便地定义和使用样式参数;3. Sass 支持继承和混合,可以将一些常用的样式定义成可复用的模板,提高代码的效率和可维护性;4. Sass 支持模块化和导入,可以将样式文件分成多个模块,方便管理和维护;5. Sass 支持条件语句和循环语句,可以根据不同的条件生成不同的样式;6. 简化 CSS 开发,提高开发效率;7. 提高 CSS 代码的可读性和可维护性;8. 方便地定义和使用样式参数,提高代码的灵活性;9. 可以将样式文件分成多个模块,方便管理和维护;
使用步骤:1. 指令:npm i sass2. 在组件内的style标签上添加:lang='scss';这条语句,注意属性值是scss而不是sass,因为使用scss可以时样式语句高亮更明显,易于检查错误,sass高亮不太明显
1. 支持1. 选择器嵌套2. 定义变量,变量可以进行加减乘除运算,在sass中所有变量以$开头,冒号后面写值,css中的宽高内外间距和边框等都可以用变量给值3. 支持定义函数,所有的指令前面需要加上@,比如@function函数指令,@return返回指令,4. 支持条件语句ifelse if5. 支持for循环语句。

3.2.代码演示–

<style scoped lang='scss'>
$p:10px;------------定义变量, 变量可以进行加减乘除运算
@function calcNum( $param ){------------定义函数@return $param * 2;
}
选择器嵌套
.input-box{display: flex;justify-content: space-between;align-items: center;padding: $p;input{height: $p*4;outline: none;border-radius: $p/2;border: 1px solid #ccc;padding-left: calcNum($p);-------------------调用函数flex:1;}span{width: $p*6;text-align: center;}
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

韦东山嵌入式Liunx入门驱动开发五

文章目录 一、驱动程序基石1-1 休眠与唤醒1-2 POLL机制1-3 异步通知(1) 异步通知程序解析(2) 异步通知机制内核代码详解 1-4 阻塞与非阻塞1-5 定时器(1) 内核函数(2) 定时器时间单位 1-6 中断下半部 tasklet1-7 工作队列1-8 中断的线程化处理1-9 mmap 本人学习完韦老师的视频&a…

springboot244基于SpringBoot和VUE技术的智慧生活商城系统设计与实现

智慧生活商城系统的设计与实现 摘 要 计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已经有了很丰富的基础&#xff0c;并且在现实生活中也到处都在使用&#xff0c;可以说&#xff0c;经过几十年的发展&#xff0c;互联网技术已经把地域信息的隔阂给消除了&…

MySQL--MHA高可用方案

MHA高可用方案实行 1.1MHA简介 MHA 在监控到 master 节点故障时&#xff0c;会提升其中拥有最新数据的 slave 节点成为新的master 节点&#xff0c;在此期间&#xff0c;MHA 会通过于其它从节点获取额外信息来避免一致性方面的问题。MHA 还提供了 master 节点的在线切换功能&a…

通过测试自动化转移安全关键软件测试

我们正面临安全关键软件的成本危机&#xff0c;这意味着所需增加的功能已经超出了支付其开发费用的能力。例如&#xff0c;波音 787 项目需要 650 万行代码&#xff0c;设计、开发和测试成本达 40 亿美元。波音777X项目的成本数字并未公开披露&#xff0c;波音737 MAX最初估计为…

python异常机制

当代码出现异常后底下代码都不会被执行了&#xff0c;也就是程序崩溃了。当然能避免异常的话尽量避免但是有的时候这个是没有办法避免的。 异常处理 &#xff08;注&#xff1a;异常处理是从上往下处理&#xff0c;所以编写代码时要注意&#xff09; 语法 try:可能出现异常…

昇腾芯片解析:华为自主研发的人工智能处理器全面分析

在当今科技发展的浪潮中&#xff0c;昇腾芯片作为一种新兴的处理器&#xff0c;正引起广泛的关注和讨论。升腾芯片究竟是由哪家公司生产的&#xff1f;这个问题一直困扰着许多人。下面小编将全面介绍、分析升腾芯片的生产商及各类参数、应用&#xff0c;以便读者对其有更全面的…

GitHub登不上:修改hosts文件来解决(GitHub520,window)

参考链接&#xff1a;GitHub520: 本项目无需安装任何程序&#xff0c;通过修改本地 hosts 文件&#xff0c;试图解决&#xff1a; GitHub 访问速度慢的问题 GitHub 项目中的图片显示不出的问题 花 5 分钟时间&#xff0c;让你"爱"上 GitHub。 (gitee.com) GitHub网站…

C++ Qt开发:QFileSystemWatcher文件监视组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍如何运用QFileSystemWatcher组件实现对文件或…

利用redis实现秒杀功能

6、秒杀优化 这个是 图灵 的redis实战里面的一个案例 6.1 秒杀优化-异步秒杀思路 我们来回顾一下下单流程 当用户发起请求&#xff0c;此时会请求nginx&#xff0c;nginx会访问到tomcat&#xff0c;而tomcat中的程序&#xff0c;会进行串行操作&#xff0c;分成如下几个步骤…

python coding with ChatGPT 打卡第22天| 二叉搜索树的操作:插入、删除、修剪、转换

相关推荐 python coding with ChatGPT 打卡第12天| 二叉树&#xff1a;理论基础 python coding with ChatGPT 打卡第13天| 二叉树的深度优先遍历 python coding with ChatGPT 打卡第14天| 二叉树的广度优先遍历 python coding with ChatGPT 打卡第15天| 二叉树&#xff1a;翻转…

django中URL配置和视图渲染

前提&#xff1a; 使用django-admin startproject XXX创建了一个django项目【项目目录为project】 django-admin startproject project 一&#xff1a;控制器配置 在项目的根目录创建一个Controller目录&#xff0c;后续所有的控制器方法都放在此目录下 这里我们在Control…

迅速上手:CentOS 系统下 SSH 服务配置指南

前言 掌握 SSH 服务&#xff0c;就像拥有了一把解锁网络世界的钥匙。本文深入浅出地介绍了如何使用 SSH&#xff08;Secure Shell&#xff09;服务&#xff0c;从连接远程服务器到安全文件传输&#xff0c;让你轻松驾驭远程管理与数据传输&#xff0c;提高工作效率&#xff0c…

[密码学]入门篇——加密方式

一、概述 加密方法主要分为两大类&#xff1a; 单钥加密&#xff08;private key cryptography&#xff09;&#xff1a;加密和解密过程都用同一套密码双钥加密&#xff08;public key cryptography&#xff09;&#xff1a;加密和解密过程用的是两套密码 历史上&#xff0c…

GraphGeo参文13:Modelling of IP Geolocation by use of LatencyMeasurements(传统的归一化流)

[13] Peter Hillmann, Lars Stiemert, Gabi Dreo Rodosek, and Oliver Rose. 2015. Modelling of IP Geolocation by use of Latency Measurements. In CNSM. 173–177. ABSTRACT IP地理定位是许多应用领域的关键促成因素,如内容交付网络、目标广告和执法。因此,需要提高准确…

【C++杂货铺】详解string

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 为什么学习string &#x1f4c1; 认识string&#xff08;了解&#xff09; &#x1f4c1; string的常用接口 &#x1f4c2; 构造函数 &#x1f4c2; string类对象的容量操作 &#x1f4c2; string类对象的访问以及遍历操…

Python实习生(自动化测试脚本开发) - 面经 - TCL新技术有限公司

JD&#xff1a; 招聘流程&#xff1a; 2024.1.3 Boss直聘 沟通 2024.1.4 约面 2024.1.6 上午面试 面试流程&#xff1a; 上来第一步&#xff0c;直接问Python基础语法&#xff0c;讲一下基础的数据类型 就记得元组和字典 分别具体说一下元组和字典 流程控制语句有哪些&…

Java Web开发---复试Tips复习

***********&#xff08;自用&#xff0c;摘录自各种文章和自己总结&#xff09;********** 小知识点理解 Web Web应用开发主要是基于浏览器的应用程序开发。一个Web应用由多部分组成 java web就是用java语言开发出可在万维网上浏览的程序 Web应用程序编写完后&#xff0c;…

【算法 高级数据结构】树状数组:一种高效的数据结构(一)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;算法题、 基础算法~赶紧来学算法吧 &#x1f4a1;往期推荐&#xff1a; 【算法基础 & 数学】快速幂求逆元&#xff08;逆元、扩展欧几里得定理、小费马定理&#x…

中医把脉笔记

目录 寸关尺对应的五脏六腑自己给自己把脉参考文章 寸关尺对应的五脏六腑 自己给自己把脉 up主道道总是睡不着的把脉教学视频 用中指按住小骨头下面一点&#xff0c;这是关脉&#xff0c;左手的关脉对应肝脏。 参考文章 中医脉诊动图&#xff08;建议收藏&#xff09; 最全…

外包干了8天,技术退步明显。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入杭州某软件公司&#xff0c;干了接近3年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…