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

(Vue2)自定义创建项目、ESLint、Vuex

自定义创建项目:基于VueCli自定义创建项目架子

安装脚手架->创建项目->选择自定义->Babel/Router/CSS/Linter

路由配置项很多,希望创建项目时就把架子搭好

hash模式和history模式  页面跳转和加载模式

Vue为单页面,只有一个HTML物理文件。通过路由系统将项目组件与URL路径绑定。一个HTML物理文件,切换页面时既需要让访问的URL路径变,又不能触发HTML物理文件重新加载,就使得VueRouter的跳页模式不能使用普通的超链接方式。

hash模式:使用锚点技术重写URL访问路径,在原有URL路径后拼接/#/xxx

显示新Dom对象,隐藏旧dom对象  hash模式是纯静态路由

history模式:直接重写url,视觉上更美观  不是纯静态路由

Use history node  for router?n

ESLint+Standard config无分号规范

Lint on save保存时校验

In dedicated config file放在单独的文件里,便于管理

ESLint自动修复

设置->(右上角)打开设置

//当保存的时候,ESLint自动帮我们修复错误
"editor.codeActionsOnSave":{"source.fixAll":true
},
//保存代码,不自动格式化
"editor.formatOnSave":false

vuex状态管理工具  管理vue通用的数据(多组件共享的数据)

场景:某个状态在很多个组件来使用(个人信息);多个组件共同维护一份数据

优势:共同维护一份数据,数据集中化管理;响应式变化;操作简洁(vuex提供了辅助函数)

基于脚手架创建项目,构建vuex(多组件数据共享)环境

创建项目,创建三组件,

安装Vuex插件,初始化一个空仓库:安装vuex@3(都是小写)

->新建store文件夹/index.js专门放Vuex

->Vue.use(Vuex)创建仓库new Vuex.Store()

->main.js中导入挂载        检验:App.vue中打印(this.$store)

(类似于配置VueRouter,多了.Store

state状态

给仓库提供数据:store中state提供唯一的公共数据源

//创建仓库
const store=new Vuex.store({//state状态,即数据,类似与vue组件中的data//区别:data:是组件自己的数据;state:所有组件共享的数据state:{count:101}
})

使用仓库数据:

1通过store直接访问

获取store
(1)this.$store
(2)import导入store
模板中:{{$store.state.xxx}}
组件逻辑中:this.store.state.xxx
JS模块中:store.state.xxx

2通过辅助函数(简化) 

{{count}}
computed:{count(){retune this.$store.state.count}
}

mapState是辅助函数,帮我们把store中数据自动映射到组件的计算属性中

导入import {mapState} from 'vuex'

->数组方式引入state   mapState(['count','title'])

->展开运算映射符  在computed:{}中写...mapState(['count','title']),页面中使用直接{{count}}

mutations修改数据

通过strict:true可以开启严格模式:利于初学者检测代码,上线时需要关闭

vuex遵循单项数据流,组件中不能直接修改数据,state数据只能通过mutations来修改

所有mutations函数,第一个参数都是state    mutations:{对数据操作的函数(state,其他参数如n) state.count+=n}

子组件调用时this.$store.commit('函数名字',n)

mutations练习:输入框值和state值双向绑定

1输入框内容渲染:value

2监听输入获取内容@input=“handleInput”     

3封装mutations处理函数    mutations:{changeCount(state,newCount){}}

4调用传参commit调用   handleInput(e){this.$store.commit('changeCount',num)}

辅助函数mapMutations(类似于mapState)

导入import {mapState,mapMutations} from 'vuex'

->数组方式引入state   mapMutations(['subCount'])

->展开运算映射符  在methods:{}中写...mapMutations(['subCount']),页面中使用直接this.subCount(10)调用

actions处理异步操作

mutations必须是同步的(便于监测数据变化,记录调试)

1提供actions方法,不能直接操作state

//context上下文(此处未分模块,可以当成store仓库)

actions:{setAsynCount (context,num){//一秒后给一个数去修改numsetTimeout(()=>{context.commit('changeCount',num)},1000)}
}

2页面中dispatch调用

this.$store.dispatch('setAsyncCount',200)

mapActions

导入import {mapState,mapMutations,mapActions} from 'vuex'

->数组方式引入state   mapActions(['changeCountAction'])

->展开运算映射符  在methods:{}中写...mapActions(['changeCountAction']),页面中使用直接this.changeCountAction(666)调用

getters(类似于计算属性)

1定义getters

getters:{//getters函数第一个参数是state,必须要有返回值filterList(state)//过滤{return state.list.filter(item=>item>5)}
}

2访问getters

通过store访问getters

{{$store.getters.filterList}}

通过辅助函数mapGetters映射

computed:{...mapGetters(['filterList'])},
{{filterList}}

模块module(进阶语法)

vuex使用单一状态树,应用的所有状态会集中到一个较大的对象。store对象可能变得臃肿。

user模块:store/modules/user.js

const state={userInfo:{name}
}
const mutations={}
const actions={}
const getters={}
export default{state,mutations,actions,getters
}
import users from './modeuls/user'
const store = new Vuex.store({modules:{user}
})

1直接通过模块名访问

多个参数封装成对象传递{id,newCount},接收时额外参数就是obj

$store.state.模块名.xxx
$store.getters['模块名/xxx']
​$store.commit('模块名/xxx',额外参数)//mutations
$store.dispatch('模块名/xxx',额外参数)//action

2通过mapState映射

子模块的映射...mapState('模块名',['xxx'])、...mapGetters('模块名',['xxx'])、...mapMutations('模块名'、...mapActions('模块名',['xxx']),['xxx'])需要开启命名空间:在模块内导出部分export default{}加上namespaced:true,

相关文章:

(Vue2)自定义创建项目、ESLint、Vuex

自定义创建项目:基于VueCli自定义创建项目架子 安装脚手架->创建项目->选择自定义->Babel/Router/CSS/Linter 路由配置项很多,希望创建项目时就把架子搭好 hash模式和history模式 页面跳转和加载模式 Vue为单页面,只有一个HTML…...

LLaMa

文章目录 Problems403 代码文件LLaMA: Open and Efficient Foundation Language Models方法预训练数据结构优化器一些加速的方法 结果Common Sense ReasoningClosed-book Question AnsweringReading ComprehensionMassive Multitask Language Understanding Instruction Finetu…...

API(九)基于协程的并发编程SDK

一 基于协程的并发编程SDK 场景: 收到一个请求会并发发起多个请求,使用openresty提供的协程说明: 这个是高级课程,如果不理解可以先跳过遗留: APSIX和Kong深入理解openresty 标准lua的协程 ① 早期提供的轻量级协程SDK ngx.thread ngx…...

JavaWeb 学习笔记 7:Filter

JavaWeb 学习笔记 7:Filter 1.快速开始 使用过滤器的方式与 Servlet 类似,要实现一个Filter接口: WebFilter("/*") public class FirstFilter implements Filter {public void init(FilterConfig filterConfig) throws ServletE…...

【AI视野·今日Robot 机器人论文速览 第三十五期】Mon, 18 Sep 2023

AI视野今日CS.Robotics 机器人学论文速览 Mon, 18 Sep 2023 Totally 44 papers 👉上期速览✈更多精彩请移步主页 Interesting: 📚GelSplitter, 基于近红外与可见光融合实现高精度surfaceNormal重建的触觉传感器。(from 华中科技大学) 基于分光镜的紧凑型…...

Elasticsearch 在bool查询中使用分词器

1. 创建索引 test setting和mappings 设置了自定义分词映射规则。 PUT /test {"settings": {"analysis": {"filter": {"my_synonym": {"type": "synonym","updateable": true,"synonyms_path&qu…...

在Python中创建相关系数矩阵的6种方法

相关系数矩阵(Correlation matrix)是数据分析的基本工具。它们让我们了解不同的变量是如何相互关联的。在Python中,有很多个方法可以计算相关系数矩阵,今天我们来对这些方法进行一个总结 Pandas Pandas的DataFrame对象可以使用c…...

物联网、工业大数据平台 TDengine 与苍穹地理信息平台完成兼容互认证

当前,在政府、军事、城市规划、自然资源管理等领域,企业对地理信息的需求迅速增加,人们需要更有效地管理和分析地理数据,以进行决策和规划。在此背景下,“GIS 基础平台”应运而生,它通常指的是一个地理信息…...

this.$nextTick()的使用场景

事件循环机制: 同步代码执行->查找异步队列,推入执行栈,执行Vue.nextTick[事件循环1]->查找异步队列,推入执行栈,执行Vue.nextTick[事件循环2]->查找异步队列,推入执行栈,执行Vue.nex…...

idea(第一次)启动项目,端口变成了8080

先上配置 server:port: 9569 spring:profiles:active: dev 该排查的问题也都没问题,重启idea也试过了,还是8080 解决办法:点击右侧的maven ,左上角的重新导入 reimport all maven projects 我又没有改动pom文件,居然还要点这…...

brpc 学习(一)M1 MacOS构建方法

tags: brpc categories: brpc 写在前面 实习阶段初次接触到 RPC 这样一种协议, 以及 brpc 这样一个很棒的框架, 但是当时没时间认真深入学习, 就是围绕使用 demo 开发, 还是有点不知其所以然的, 最近抽空来学习一下 brpc, 首要的一点就是在开发机上构建项目, 并且能够跑起来,…...

Python 与 Qt c++ 程序共享内存,传递图片

python 代码 这里Python 使用 shared_memory QT 使用 QSharedMemory 简单协议: 前面4个字节是 图片with,height,0,0 后面是图片数据 import sys import struct def is_little_endian():x0x12345678y struct.pack(I,x)return y[0]0x78print(f"is_little_end…...

【2023年中国研究生数学建模竞赛华为杯】E题 出血性脑卒中临床智能诊疗建模 问题分析、数学模型及代码实现

【2023年中国研究生数学建模竞赛华为杯】E题 出血性脑卒中临床智能诊疗建模 1 题目 1.1 背景介绍 出血性脑卒中指非外伤性脑实质内血管破裂引起的脑出血,占全部脑卒中发病率的10-15%。其病因复杂,通常因脑动脉瘤破裂、脑动脉异常等因素,导致…...

2024字节跳动校招面试真题汇总及其解答(五)

17.TCP的拥塞控制 TCP 的拥塞控制是指在 TCP 连接中,发送端和接收端通过协作来控制网络中数据包的流量,避免网络拥塞。TCP 的拥塞控制是 TCP 协议的重要组成部分,它可以确保 TCP 连接的稳定性和可靠性。 TCP 的拥塞控制主要有以下几个目的: 防止网络拥塞:当网络中的数据…...

如何撤销某个已经git add的文件以及如何撤销所有git add提交的文件?

如果你想撤销已经添加&#xff08;git add&#xff09;到暂存区的单个文件&#xff0c;可以使用 git reset 命令。以下是具体的命令格式&#xff1a; git reset <file>在这里&#xff0c;<file> 是你想要从暂存区中移除的文件名。比如&#xff0c;如果你想要撤销已…...

JVM高级性能调试

标准的JVM是配置为了高吞吐量&#xff0c;吞吐量是为了科学计算和后台运行使用&#xff0c;而互联网商业应用&#xff0c;更多是为追求更短的响应时间&#xff0c;更低的延迟Latency&#xff08;说白了就是更快速度&#xff09;&#xff0c;当用户打开网页没有快速响应&#xf…...

APK的反编译,签名,对齐

APK的反编译&#xff0c;签名&#xff0c;对齐 – WhiteNights Site 2023年9月22日 标签&#xff1a;Android, 应用开发 记录下相关的命令行参数。 APK的打包与解包 java -jar apktool.jar 首先&#xff0c;需要一个jar包&#xff0c;以我在用的为例&#xff1a;apktool_2.8.…...

Django(20):信号机制

目录 信号的工作机制信号的应用场景两个简单例子Django常用内置信号如何放置信号监听函数代码自定义信号第一步&#xff1a;自定义信号第二步&#xff1a;触发信号第三步&#xff1a;将监听函数与信号相关联 信号的工作机制 Django 框架包含了一个信号机制&#xff0c;它允许若…...

31.链表练习题(2)(王道2023数据结构2.3.7节16-25题)

【前面使用的所有链表的定义在第29节】 试题16&#xff1a;两个整数序列A&#xff0c;B存在两个单链表中&#xff0c;设计算法判断B是否是A的连续子序列。 bool Pattern(LinkList L1,LinkList L2){ //此函数实现比较L1的子串中是否有L2LNode *p, *q; //工作在L1,p记录L1子串…...

排序算法之归并排序

一、归并排序的形象理解 原题链接 示例代码 void merge_sort(int q[], int l, int r) {if (l > r) return;int mid l r >> 1;merge_sort(q, l, mid), merge_sort(q, mid 1, r);int k 0, i l, j mid 1;while (i < mid && j < r) //第一处if (q[i]…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...