【Vue3实践】(七)Vue中的全局状态管理 Vuex与Pinia的使用
文章目录
- 1.前言
- 2.状态的概念
- 3.Vuex管理状态
- 3.1.Vuex安装及功能定义
- 3.2.全局注入及使用
- 4.Pinia管理状态
- 4.1.Pinia中的核心概念
- 4.2.Pinia的定义与使用
- 4.3.使用组合式API定义Store
- 5.总结
1.前言
由于在日常开发中会有一部分前端的开发任务,会涉及到Vue的项目的搭建、迭代、构建发布等操作,所以想系统的学习一下Vue相关的知识点,本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录,同时也会提到一些功能在实际生产环境中的使用。
历史文章链接如下:
《Vue3搭建、路由配置与基本语法》
《响应式变量、双向绑定、计算属性、监听器》
《优雅使用VUE3 组件特性:组件定义、组件注册、事件监听、双向绑定》
《优雅使用VUE3 组件特性:属性透传、依赖注入、组件插槽、动态组件》
《生命周期函数、组合式函数的使用》
《Vue3使用vite处理环境变量、打包部署、nginx配置》
最近在公司开发的时候得到这么一个需求,需要给一个旧的系统加上一些按钮权限,考虑了插件、透传、依赖注入等方式来实现,但是都有一定的局限性,最终采用了Vuex全局状态管理的方式来实现了这个需求。
本篇会讲解一下Vue中状态的概念,以及全局状态组件 Vuex
和 Pinia
的使用,这里之所以会使用Vuex,是因为这个旧的项目是通过Vue2进行编写的,如果是Vue3项目的话,推荐使用Pinia,比Vuex更轻量、更简洁、功能更加强大。
2.状态的概念
在学习这两个组件之前,我们先了解一下什么是状态。
其实,只要使用过Vue的响应式变量,就已经使用过状态了,我们将Vue的组件可以分成3个部分,分别是:状态、视图、交互
- 状态:所谓的状态,就是在Vue组件中的数据部分,用于驱动应用的数据源。
- 视图:对状态的映射,也就是通过数据渲染出的DOM元素。
- 交互:监控了视图中的数据输入动作,将视图中输入的值传递给数据源。
他们3者可以形成一个单项的数据流,即:状态的变更会触发视图的变化,用户在视图上输入也会通过交互传递给状态。
上面所说的状态,基本上局限与某个特定的组件中,而我们在实际的开发中可能会有这样的一种需求:提供一个数据源,让所有组件都可以使用,我们可以简单的把这样的一种数据源叫做全局状态,可以使用Vuex或Pinia来实现。
之所以不用组件的逐级透传和依赖注入的方式,是因为有时候组件并不完全在同一个组件树上。我们针对不同的业务功能模块,可能会有不同的组件树根节点,如下图所示:
在这样的模块划分下,不管是透传还是依赖注入,都需要在各自的根节点上定义一次“全局状态”,供子节点使用,这样依然会有重复的代码。
3.Vuex管理状态
接下来就通过实现上述需求的方式,来讲解Vuex的简单使用,更详细的使用方式可以参考《Vuex文档》。
先根据需求拆解一下需要完成的任务:
- 需要通过一个全局状态,让所有组件可以直接使用。
- 需要提供一个
setter
方法,修改这个全局状态的值。 - 由于权限列表是来自于后端服务,所以需要有一个异步请求操作。
综上,会使用到Vuex中的 State
,Mutation
,Action
三种特性,其中 State 就是提供给各个组件使用的全局特性,Mutation 则是 Stage 的修改入口,Action 是异步操作,用于异步提交 Mutation。
此外,可以利用插件系统将定义好的功能注入到各个组件中,让组件可以直接使用。
3.1.Vuex安装及功能定义
因为我这里是一个Vue2的旧版本代码库,不支持Vuex4以上的版本,所以选择了一个3.x的版本,通过npm安装。
npm install vuex --save @3.6.2
安装完成之后,在src
根目录下创建一个store
目录,并创建index.js
文件,内容如下:
import Vuex from 'vuex'
import Vue from "vue";Vue.use(Vuex);const store = new Vuex.Store({state: {// 权限全局状态authMap: {}},mutations: {// 定义更新权限的setter方法setAuthMap(state, authMap) {state.authMap = authMap;}},actions: {// 定义一个异步请求方法,用于获取权限batchAuth(context) {// 此处是模拟数据,实际开发中替换了axios发起请求let data = {"user:list": true,"user:add": false}context.commit('setAuthMap', data);}}
})// 导出组件
export default store
3.2.全局注入及使用
想要任意组件都可以直接使用上面定义好的store
,则需要在main.js
中通过插件机制进行注入:
import Vue from "vue";
import App from "./App.vue";
import store from "./store"; // 引入 store 文件new Vue({store, // 注册 storerender: h => h(App),
}).$mount("#app");
注册完成之后,就可以通过this.$stroe
使用了。
由于权限列表并不会经常变化,所以我们只需在进入系统时查询一次即可,即:在App.vue
的生命周期钩子中执行,通过 dispatch
调用action中定义的异步方法。
mounted() {this.$store.dispatch('batchAuth');
}
然后在对应组件的按钮上,也可以直接使用store
,例如:
<el-button type="primary" @click="openDialog()" v-if="$store.state.authMap['user:add']">新增用户
</el-button>
此时由于user:add
为false,这里的新增用户按钮就会对当前的使用者隐藏。其他的使用方式也是类似的,我们可以从authMap
通过某个固定的key取出一个布尔值,则可以自由的处理DOM的状态,例如:v-show
,:disabled
等等。
4.Pinia管理状态
如果是一个新的Vue3项目,使用Pinia来管理状态是一个更佳的选择,配合组合式API使用非常简洁易用。
4.1.Pinia中的核心概念
Pinia中有4个核心的概念,分别是:store
, state
, getter
, action
。
store
:用于来承载全局状态的实体,它不会挂接在某个组件树上,而是每个组件都可以直接引入并使用它。state
:是应用程序的状态数据,我们可以上面定义自己需要的任何数据,例如用户信息、页面状态、列表数据等。state
在组件式API中类似于data()
,在组合式API中类似于ref
。getter
:用于获取state中数据的函数,并做二次计算,可用于计算衍生数据、过滤数据等场景。getter
与computed
操作类似。action
:是store
中的函数,多用于修改state
的值,它类似于method
的作用。
4.2.Pinia的定义与使用
安装并配置pinia
:
npm install pinia
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)// 全局组件引入
app.use(pinia)// 挂载应用
app.mount('#app')
接下来是创建store
,类似于Vuex的做法,我们可以./store
目录下创建一个useAuthMapStore.js
文件,通过defineStore
创建一个store对象,对象名遵循以use
开头,以store
结尾的规则,第一个参数是当前对象的id,需要保证唯一,第二个参数就是选项式API中的选项 option。
综上,上面的Vuex 定义的authMap,用Pinia来编写就简洁多了。
import { defineStore } from "pinia";export const useAuthMapStore = defineStore("authMap", {state: () => ({ authMap: {} }),actions: {// async 异步调用async batchAuth() {this.authMap = {"user:list": true,"user:add": false};}}
});
在APP.vue中触发batchAuth
方法:
<script setup>
import { useAuthMapStore } from "@/store/module/useAuthMapStore";
useAuthMapStore().batchAuth();
</script>
在任意组件中使用:
<template><div class="hello"><div> {{ store.authMap }}</div></div>
</template><script setup>
import { useAuthMapStore } from "../store/module/useAuthMapStore";
const store = useAuthMapStore();
</script>
4.3.使用组合式API定义Store
如果是使用组合式API,也可以这么写:
import { defineStore } from "pinia";
import { ref } from "vue";export const useAuthMapStore = defineStore("authMap", () => {const authMap = ref({});function batchAuth() {authMap.value = {"user:list": true,"user:add": false};}return { authMap, batchAuth };
});
使用的方式和选项式API的使用方式是一样的,个人更建议使用组合式API来定义Store,在Vue3上的支持性更好,更灵活,风格也统一。
在上述的例子中,还没有提到如何使用getter
方法,在组合式API中的getter
方法其实就是一个属性计算,通过computed
实现即可,改造后的代码如下:
export const useAuthMapStore = defineStore("authMap", () => {const authMap = ref({});const anotherAuthMap = computed(() => {let value = JSON.parse(JSON.stringify(authMap.value));value["user:view"] = true;return ref(value);});function batchAuth() {authMap.value = {"user:list": true,"user:add": false};}return { authMap, batchAuth, anotherAuthMap };
});
然后验证一下结果:
<template><div class="hello"><div> {{ store.authMap }}</div><div> {{ store.anotherAuthMap }}</div></div>
</template>
5.总结
本篇主要讲述Vue中的状态、全局状态的概念以及如何通过Vuex和Pinia来管理全局状态,其中Vuex更适合与Vue2的旧项目,而Pinia适合与使用Vue3构建的新项目,Pinia使用起来更加轻量和简洁,配合组合式API使用效果更加。
关注以下的知识点:
- Vuex:
- 核心概念:
State
,Mutation
,Action
,State用于定义数据,Mutation用于修改数据,Action是异步执行的方法,往往是用于异步获取数据后调用Mutation修改数据。 - Vuex可以通过插件进行全局注入,通过
this.$store
语法进行调用,其中this.$store.state
用于获取状态数据,this.$store.dispatch
用于异步调用Action中的函数。
- 核心概念:
- Pinia
- 核心概念:分别是:
store , state , getter , action
。store
:用于来承载全局状态的实体,它不会挂接在某个组件树上,而是每个组件都可以直接引入并使用它。state
:是应用程序的状态数据,我们可以上面定义自己需要的任何数据,例如用户信息、页面状态、列表数据等。getter
:用于获取state中数据的函数,并做二次计算,可用于计算衍生数据、过滤数据等场景。action
:是store
中的函数,多用于修改state
的值。
- 定义:通过
defineStore
定义一个store对象,第一个参数为对象id,第二个参数则是定时对象体。 - 命名:通常以
use
开头,以store
结尾,建议文件名与store对象名保持一致,例如:useCounterStore
和useCounterStore.js
。
- 核心概念:分别是:
相关文章:
Day 6 模版 template
本文目标: 实现静态资源服务 支持HTML渲染 后端需解决资源利用,并发,数据库存储问题. 静态文件 之前在设置动态路由的时候,通配符*支持匹配多级子路径 映射到真实文件后,将文件返回,静态服…...
mysql80-DBA数据库学习1-数据库安装
掌握能力 核心技能 核心技能 mysql部署 官网地址www.mysql.com 或者www.oracle.com https://dev.mysql.com/downloads/repo/yum/ Install the RPM you downloaded for your system, for example: yum install mysql80-community-release-{platform}-{version-number}.noarch…...
杭电OJ 2084 数塔
DP动态规划如何把原问题分解成子问题,分析出状态转移的几种情况数塔 题目明确告诉你,这是一道DP动态规划问题,那么首先先回顾什么是动态规划,就是把原问题分解为多个子问题,再记忆子问题的结果,来降低时间复杂度。 观察这个数塔,首先设置一个数组dp[][],令\(dp[j][i]\)…...
clickhouse链接
https://edu.aliyun.com/trainingcamp/354200?spm=5176.20128342.J_6302206100.2.72dc7ba22TqvFW...
Unity网络通信系统设计.md
Unity网络通信系统设计Buffer报文 BufferEntity类作为报文基类的作用包括:封装数据:BufferEntity类可以用来封装网络通信中的数据,方便在网络传输中进行处理和管理。提供数据缓冲区:BufferEntity类通常会包含一个数据缓冲区,用来存储待发送或接收的数据,以便进行网络通信…...
Excel生成随机密码
针对生成一个8到12位包含大小写字母、数字、以及特殊字符的随机密码的需求,我们可以采用VBA来实现,以确保每种字符至少包含一次,同时随机生成密码长度。下面是一个更贴近需求的VBA函数示例: Function GenerateComplexPassword() As StringDim passwordLength As IntegerDim…...
【Vue3实践】(七)Vue中的全局状态管理 Vuex与Pinia的使用
文章目录1.前言2.状态的概念3.Vuex管理状态3.1.Vuex安装及功能定义3.2.全局注入及使用4.Pinia管理状态4.1.Pinia中的核心概念4.2.Pinia的定义与使用4.3.使用组合式API定义Store5.总结1.前言 由于在日常开发中会有一部分前端的开发任务,会涉及到Vue的项目的搭建、迭…...
Spring-面试题
文章目录1 什么是Spring?2.Spring三大特点?3 Spring切面可以应用5种类型的通知,哪5种?4. 谈谈你对Spring容器中Bean标签的理解?5. 用注解将对象注册到Spring容器当中,有几种注解方式?它们有什么区别吗?6.…...
【go 科学计算】用于统计、机器学习和数据操作
目录 1、介绍 2、用法 2.1 设置go代理 2.2 创建表 2.3 插入和删除行 2.4 排序...
python实战应用讲解-【numpy科学计算】实用小技巧(五)(附python示例代码)
目录 Numpy 创建一个通用函数 具体步骤 攻略小结 用chararray做字符串操作 具体步骤 攻略小结...
JS加密解密技术保护用户隐私,避免遭受勒索
近期出现了一些利用用户隐私进行勒索的事件,对个人和社会安全造成了极大的威胁。为了保护用户的隐私安全,我们可以使用JS加密解密技术来保护敏感信息,从而避免遭受勒索。 首先,我们需要了解JS加密解密的基本原理。JS加密解密的核…...
Fragstats的土地利用景观格局分析
土地利用以及景观格局是当前全球环境变化研究的重要组成部分及核心内容,其对区域的可持续发展以及区域土地管理有非常重要的意义。通过对土地利用时空变化规律进行分析可以更好的了解土地利用变化的过程和机制,并且通过调整人类社会经济活动,…...
第一章 作业【计算机系统结构】
第一章 作业【计算机系统结构】前言推荐第一章 作业例1.2例1.3习题1.7最后前言 以下内容源自《【计算机系统结构】》 仅供学习交流使用 推荐 无 第一章 作业 例1.2 例1.2 某计算机系统采用浮点运算部件后,使浮点运算速度提高到原来的20倍,而系统运行某一程序的整体性能提…...
[oeasy]python0117 文字的演化_埃及圣书体_象形文字_楔形文字
埃及圣书体 回忆上次内容 两河流域 苏美尔文明 所使用的 楔形文字 不是象形文字 楔形文字的字型 究竟是怎么来的呢?🤔 巴别塔 苏美尔的后继者 巴比伦人 想盖一个通天塔 耶和华 观察了 造塔混淆了 他们的语言塔 永远也 造不起来 发音 是很飘忽的 …...
你是真的“C”——进行动态内存分配库函数的使用详解
你是真的“C”——申请动态空间库函数的使用详解😎前言🙌一、为什么需要动态内存分配?💞free 函数😘malloc 库函数😘calloc 库函数😘realloc 库函数😘总结撒花💞…...
程序员的那些事
前言: 本文章介绍了程序员是做什么的要学什么 目录 前言: 一 什么是程序员 二 程序员是做什么的 三 程序员要学的编程语言 1 、对普通人而言不建议C或C 2 、不建议学习Oracle、Cisco和C#系列 3、Web前端 4、服务端开发 5、机器学习工程师…...
this.$nextTick()---dom渲染结束后执行
将回调延迟到下次 DOM 更新循环之后执行 在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this.$nextTick()可以等待dom生成后获取dom对象 <template> <section> <div ref"h…...
归并排序(C/C++)
本文目录1. 算法思想2. 简单概述3. 算法步骤4. 代码实现(C)4.1 vector 类型的递归4.2 vector 类型的迭代5. 补充知识6. 其它排序算法1. 算法思想 将一个大的无序数组有序化,可以把大的数组分成两个,然后对这两个数组分别进行排序…...
14_ubuntu乱码终级解决方案
title: ubuntu 乱码 urlname: 14_ubuntu乱码终级解决方案 author: vsyour language: zh-CN date: 2017-05-04 03:03:03 tags: [ubuntu,linux] categories: 网络安全 最烦乱码了,今天又碰到了. 解决Linux(Ubuntu)中文乱码,添加中文字符集 添加中文字符编码ÿ…...
项目中的富文本编辑器
● 现在很多项目中, 为了丰满一些 , 会加入富文本的元素在里面, 这样可以让用户的编辑变得更加多样化 ● 本文就简单介绍一下富文本编辑器在项目中的简单使用 ● 目前市场上有很多富文本编辑器插件, 但是大多大同小异, 基本功能都差不多 ● 文本以 "wangeditor" 为…...
Vue项目的打包上线步骤
Vue项目的打包上线步骤一、打包之前的路由模式二、性能分析和CDN的应用2.1 性能分析2.2 webpack排除打包2.3 CDN文件配置2.4 注入CDN文件到模板一、打包之前的路由模式 两种路由模式 hash模式 : #后面是路由路径,特点是前端访问,#后面的变化不…...
程序员亲测有用的人体工学椅,我再冲一把奖励自己!
为什么要买人体工学椅? 我先来说说我个人的看法,以我为例,作为一个程序员一天到晚基本都是坐着的,白天上班坐着,晚上没事的时候还得撸两把游戏,所以椅子是陪伴我最长时间的伙伴了。所以我个人觉得吧&#x…...
特斯拉的操作系统是用什么语言编写的?
总目录链接>> AutoSAR入门和实战系列总目录 文章目录特斯拉车辆操作系统特斯拉GitHub中使用的语言Ruby和GoPythonSwift 和 Objective CQt我们知道操作系统至少需要一些非常低级的代码,这些代码在系统首次启动时运行,必须使用接近硬件的语言编写。…...
浏览器打印-window.print
打印方法 window.print()print() 方法用于打印当前窗口的内容, 默认情况下会将整个html页面 的内容转换为pdf > 支持在线预览打印或者导出pdf。 以下是打开百度页面 在控制台调用 window.print 方法 后弹出的弹框 ,在右侧可以选择 纵向/横向打印。 需要注意的是…...
【开发】中间件——RocketMQ
分布式消息系统 RocketMQ概念,用途,特性安装RocketMQ掌握RocketMQ的api使用对producer、consumer进行详解了解RocketMQ的存储特点 简介及相关概念JavaAPISpringBoot整合RocketMQ消息的顺序收发消息系统的事务、存储、重试策略消息系统的集群 RocketMQ R…...
Error: error:0308010C:digital envelope routines::unsupported
vscode运行react时报错 opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ], library: ‘digital envelope routines’, reason: ‘unsupported’, code: ‘ERR_OSSL_EVP_UNSUPPORTED’ 什么原因导致 “0308010c:digital envelope r…...
【第017问 Unity Physics.OverlapSphere如何检测附近玩家?】
一、背景 如何检测一个对象范围内的玩家,这个可以直接使用距离判定,物体射线检测等相关方式;这里采用Physics.OverlapSphere的方式来实践其过程,并对Physics.OverlapSphere的使用做一下记录; 二、Physics.OverlapSph…...
C++ MVC模式
概述 C是一种流行的编程语言,它可以用于构建各种类型的应用程序,包括Web应用程序、桌面应用程序和移动应用程序。在这里,我将为您介绍C中的MVC模式,以及如何在C中实现MVC模式。 MVC(Model-View-Controller࿰…...
插入排序(C++)
算法思想:插入排序的工作原理是通过构建有序序列,对于未排序的数据,在已排序的序列中从后向前扫描,找到相应的位置并插入。插入排序在实现上,通常采用in-place排序,因而在从后向前扫描的过程中,…...
服务端(三) node.js 主要的核心模块
// 核心模块,是node中自带的模块,可以在node中直接使用 // window 是浏览器的宿主对象,node中是没有的 // global 是node中的全局对象,作用类似于window // ES标准下,全局对象的标准名应该是 globalThis /* 核心模块…...
Libtorch的安装与介绍
1.背景众所周知,现在提到深度学习就离不开PyTorch。但其实PyTorch从更广泛的意义上来说,也只是Torch的Python接口而已。只是大家现在都习惯用Python写代码,所以PyTorch比较火。但是不要忘了Torch其实还有C的接口,名字叫libtorch。…...
二叉树(堆)
目录一、什么是堆?二、堆的实现2.1 结构体变量的声明2.2 堆的初始化2.3 堆的销毁2.4 插入数据2.5 删除数据2.6 堆内有效数据的数目2.7 取堆顶元素2.8 判断堆是否为空2.9 代码汇总三、经典“TopK”问题一、什么是堆? heap 是一个抽象的数据结构ÿ…...
从矩阵理论角度理解偏最小二乘回归,以及在脑科学中(脑影像与行为、基因表达的关系)的应用举例
偏最小二乘法 (PLS) 是一种多元数据驱动的统计技术,旨在提取表示最大大脑行为关联的潜在变量(或潜在成分 latent components [LC])。 从矩阵理论角度理解偏最小二乘回归,以及在脑科学中(脑影像与行为、基因表达的关系)的应用举例 矩阵理论角度理解偏最小二乘回归偏最小二…...
dp 就 dp ,数位dp是什么意思 ?
💧 dp 就 dp ,数位dp是什么意思 ?💧 🌷 仰望天空,妳我亦是行人.✨ 🦄 个人主页——微风撞见云的博客🎐 🐳 数据结构与算法专栏的文章图文并茂🦕生动…...
MySQL面试必看
1.MySQL中的索引用的是什么数据结构 Innodb使用B树数据结构 1.Hash表:等值查询效率比较高、但是不支持范围查询。 2.二叉树:时间复杂度log2n 缺点:有可能产生不平衡 类似于链表的结构 时间复杂度为o(n)。 3.平衡二叉树avl/红黑树:…...
2023年全国最新道路运输从业人员精选真题及答案34
百分百题库提供道路运输安全员考试试题、道路运输从业人员考试预测题、道路安全员考试真题、道路运输从业人员证考试题库等,提供在线做题刷题,在线模拟考试,助你考试轻松过关。 28.根据《放射性物品运输安全管理条例》规定,运输放…...
python -- 科研论文海洋气象科学绘图的配色汇总
海洋气象科学科研绘图中常用的配色[1、ColorBrewer 彩色地图,默认情况下包含在 matplotlib 中](https://colorbrewer2.org/#typesequential&schemeBuGn&n3)[2、proplot package 自带的色系](https://proplot.readthedocs.io/en/latest/colormaps.html#ug-pe…...
Prometheus监控实战系列二: 安装部署
Prometheus支持多种操作系统,例如Linux、Windows和Max OSX等。在产品官网上提供了独立的二进制文件进行下载,可下载对应的tar包并在相应系统的服务器上进行安装部署。当然,做为与容器有着紧密联系的监控系统,Promethesu也可以很方…...
欧莱雅校招负责人张泽宇:拥抱Z世代,探索新玩法
作为校招HR,你在雇主品牌创新实践的路上做过什么尝试? 2020年,欧莱雅正式推出了全新的雇主品牌价值主张 —— 敢为敢超越,就是欧莱雅(Freedom to go beyond, thats the beauty of L’ORAL),鼓励…...
安装python教程并解决Python安装完没有Scripts文件夹问题
安装python教程 并解决Python安装完没有Scripts文件夹问题 ** 一背景 **首先要了解这个出现的原因是下载安装的版本问题 系統是32 bit 的版本还是 64bit 的 web-based: 透过网络安装的,就是执行安装后才透过网络下载python executable: 可執行文件的ÿ…...
牛客论坛项目总结
目录 1.请简要介绍一下你的项目? 1.如何实现项目的注册问题 2.项目如何实现用户唯一性检验 3.登录状态保存在哪 4.用户登陆上之后怎么显示登录页面 5.拦截器(Interceptor) 6.ThreadLocal(线程安全) 7.md5原理知…...
【Python学习笔记】b站@同济子豪兄 用pytorch搭建全连接神经网络,对Fashion-MNIST数据集中的时尚物品进行分类
【Python学习笔记】原作b站同济子豪兄 用pytorch搭建全连接神经网络,对Fashion-MNIST数据集中的时尚物品进行分类 跟着b站同济子豪兄的视频自学写的代码,内容是用pytorch搭建全连接神经网络,对Fashion-MNIST数据集中的时尚物品进行分类 视频…...
2年功能测试月薪9.5K,100多天自学自动化,跳槽涨薪4k后我的路还很长...
前言 其实最开始我并不是互联网从业者,是经历了一场六个月的培训才入的行,这个经历仿佛就是一个遮羞布,不能让任何人知道,就算有面试的时候被问到你是不是被培训的,我还是不能承认这段历史。我是为了生存,…...
【IoT 毕业设计】Ruff硬件+阿里云IoT+微信小程序构建环境监控系统
0.技术架构 IoT 物联网毕业设计实战采用 Ruff 开发板,串口连接温湿度传感器DHT11和空气质量传感器SDS011,每5分钟采集一次数据,通过MQTT协议发送到阿里云 IoT 物联网平台,写入云端的设备影子中。微信小程序调用阿里云函数计算FC…...
【VUE3】计算属性及其缓存特性
计算属性 基础示例 模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象: const author reactive({name: John Doe,b…...
【计算机网络】从输入网址到网页显示,期间发生了什么?
【计算机网络】从输入网址到网页显示,期间发生了什么? 接下来以下图较简单的网络拓扑模型作为例子,探究探究其间发生了什么? 文章目录【计算机网络】从输入网址到网页显示,期间发生了什么?一:孤…...
【vue2】近期bug收集与整理01
🥳博 主:初映CY的前说(前端领域) 🌞个人信条:想要变成得到,中间还有做到! 🤘本文核心:记录博主在vue2中遇到过的坑,本文是博主的学习使用总结 目录 1登陆token的问…...
JSON和AJAX
JSON JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式,而且很多语言都提供了对json的支持(包括C,C,C#,Java,JavaScript…...
Python入门到精通【精品】第六章 - 函数
Python入门到精通【精品】第六章 - 函数 1. 如何理解函数2. 函数的定义3. 函数的使用3.1. 函数的调用3.2. 实参与形参3.3. 函数的返回3.4. 完整的函数设计3.5. 位置参数和关键参数1. 如何理解函数 当你第一次接触到“函数”这个概念的时候,你肯定会不由自主的联想到数学里面也…...
春招大盘点:找工作除了招聘网站还有哪些渠道?
又是一年毕业季,估计同学们都正在写论文、找工作两头忙,很多同学和小C“诉苦”说现在找实习的渠道太少了,招聘网站都刷完了,也没看到很合适的岗位。那找工作除了招聘网站还有什么渠道呢?其实是有的,今天就为…...
雷电4模拟器安装xposed框架(2022年)
别问我都2202年了为什么还在用雷电4安卓7。我特么哪知道Xposed的相关资料这么难找啊,只能搜到一些老旧的资料,尝试在老旧的平台上实现了。 最初的Xposed框架现在已经停止更新了,只支持到安卓8。如果要在更高版本的安卓系统上使用Xposed得看看…...
Gartner发布CNAPP市场指南 腾讯云为国内唯一入选云厂商
近日,国际研究机构Gartner发布《Market Guide for Cloud-Native Application Protection Platforms》(《云原生应用保护平台(CNAPP)市场指南》)(以下简称《市场指南》),腾讯云凭借集…...
数字藏品应用场景分析
数字藏品应用场景广泛,个人资料图片(PFP)元宇宙、艺术收藏、游戏、体育、文物、音乐等等都可以上链,以数字藏品的形式发行。国际市场中,个人资料图片占大多数,国内多以艺术收藏、文物藏品等为主。 数字藏品…...
spring boot项目:实现与数据库的连接
步骤【写在前面】定义数据库连接信息:引入数据库驱动:创建数据源:创建JdbcTemplate:编写DAO层:使用Service注解标注Service层:使用RestController注解标注Controller层:示例代码:app…...
解析vue中的process.env
一、介绍 1、process process是 nodejs 下的一个全局变量,它存储着 nodejs 中进程有关的信息。 2、process.env env 是 environment 的简称,process.env属性返回一个包含用户环境的对象。 3、dotenv Dotenv 是一个零依赖的模块,它能将环境变…...
ESP32 开启 Wi-Fi 热点与手机端 Iperf 测试 APP 来测试 ESP32 Wi-Fi AP 速率的流程
# 测试需求: ESP32 开启 WiFi AP Server 模式手机连接 ESP32 WiFi AP 热点通过手机端 Iperf 测试 APP 测试 ESP32 WiFi 热点的 Iperf 速率 测试用例: 可以基于 “esp-idf/examples/wifi/iperf” 例程进行测试。ESP32 设备下载 Iperf 例程后࿰…...
Python图像处理——计算机视觉中常用的图像预处理
概述 在计算机视觉项目中,使用样本时经常会遇到图像样本不统一的问题,比如图像质量,并非所有的图像都具有相同的质量水平。在开始训练模型或运行算法之前,通常需要对图像进行预处理,以确保获得最佳的结果。图像预处理…...
单链表的插入和删除
一、插入操作 按位序插入(带头结点): ListInsert(&L,i,e):插入操作。在表L中的第i个位置上插入指定元素e。 typedef struct LNode{ElemType data;struct LNode *next; }LNode,*LinkList;//在第i 个位置插插入元素e (带头结点) bool Li…...
安卓U3D逆向从Assembly-CSharp到il2cpp
随着unity技术的发展及厂商对于脚本源码的保护,很大一部分U3D应用的scripting backend已经由mono转为了il2cpp,本文从unity简单应用的制作讲起,介绍U3D应用脚本的Assembly-CSharp.dll的逆向及il2cpp.so的逆向分析。 目录如下: 0…...
机器学习——元学习
元学习(Meta Learning)是一种机器学习方法,旨在使模型能够学习如何学习。它涉及到在学习过程中自动化地学习和优化学习算法或模型的能力。元学习的目标是使模型能够从有限的训练样本中快速适应新任务或新环境。 在传统的机器学习中ÿ…...
【爬虫基础】第6讲 opener的使用
在爬虫中,opener是一个用来发送HTTP请求的对象。它可以用来模拟浏览器发送请求,包括设置请求头、处理Cookie等操作。使用opener可以实现一些高级功能,如模拟登录、处理验证码等。 方法1: from urllib.request import Request,bu…...
软件测试/测试开发丨Python 数据类 dataclass 学习笔记
dataclass 介绍 dataclass优势 可读性强操作灵活轻量 应用场景 创建对象完美融合平台开发 ORM 框架 案例 场景:如果创建一只猫,信息包括猫的名字、体重、颜色。同时打印这个对象的时候,希望能打印出一个字符串(包含猫的各种信息&…...