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

在 Vue 3 项目中引入 js-cookie 库

news 来源：原创 2025/8/16 3:18:41

1. 安装 `js-cookie`

你可以通过 npm 或者 yarn 来安装 js-cookie：

npm install js-cookie
# 或者
yarn add js-cookie

2. 在组件里引入并使用 `js-cookie`

以下给出两种使用方式：

全局引入

在 main.js 中全局引入 js-cookie，这样在所有组件里都能使用。

import { createApp } from 'vue';
import App from './App.vue';
import Cookies from 'js-cookie';const app = createApp(App);
// 将 Cookies 挂载到全局
app.config.globalProperties.$cookies = Cookies;app.mount('#app');

在组件中使用：

<template><div><button @click="setCookie">设置 Cookie</button><button @click="getCookie">获取 Cookie</button></div>
</template><script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();const setCookie = () => {proxy.$cookies.set('testCookie', 'Hello, js-cookie!');
};const getCookie = () => {const value = proxy.$cookies.get('testCookie');console.log('Cookie 值:', value);
};
</script>

局部引入

在需要使用 js-cookie 的组件中局部引入：

<template><div><button @click="setLocalCookie">设置局部 Cookie</button><button @click="getLocalCookie">获取局部 Cookie</button></div>
</template><script setup>
import Cookies from 'js-cookie';const setLocalCookie = () => {Cookies.set('localTestCookie', 'Local Hello, js-cookie!');
};const getLocalCookie = () => {const value = Cookies.get('localTestCookie');console.log('局部 Cookie 值:', value);
};
</script>

上述两种方式都能在 Vue 3 项目中使用 js-cookie，你可以依据项目需求选择合适的引入方式。全局引入适合在多个组件频繁使用的场景，而局部引入则适用于仅在特定组件使用的情况。

在 Vue 3 项目中引入 js-cookie 库

1. 安装 js-cookie 你可以通过 npm 或者 yarn 来安装 js-cookie： npm install js-cookie # 或者 yarn add js-cookie2. 在组件里引入并使用 js-cookie 以下给出两种使用方式： 全局引入在 main.js 中全局引入 js-cookie，这样在所有组件里…...

编程日记 2025/8/16 3:18:41

HarmonyOs学习环境配置后实验1：创建项目Hello World

HarmonyOS开发入门：环境配置与Hello World实验实验目标掌握HarmonyOS开发环境配置，创建首个HarmonyOS应用并实现"Hello World"界面展示实验准备已安装DevEco Studio开发环境已配置HarmonyOS开发依赖项熟悉基本TypeScript/ArkTS语法&am…...

编程日记 2025/8/16 3:16:45

Spark on K8s 在 vivo 大数据平台的混部实战与优化

一、Spark on K8s 简介（一）定义与架构 Spark on K8s 是一种将 Spark 运行在 Kubernetes（K8s）集群上的架构，由 K8s 直接创建 Driver 和 Executor 的 Pod 来运行 Spark 作业。其架构如下。 Driver Pod：相当于 Spark 集群中的 Driver，负责作业的调度和管理，它会根据作业…...

编程日记 2025/8/16 3:15:09

《软件设计师》复习笔记（13）——结构化开发方法

目录 1. 结构化开发方法 1.1 系统分析过程 1.2 系统设计基本原理 （1）内聚性（模块内部关联程度） （2）耦合性（模块间依赖程度） 真题示例： 1.3 系统总体结构设计&…...

编程日记 2025/8/13 12:32:10

Android创建测试配置和生产配置

Android测试与生产环境配置指南在Android开发中，创建不同的构建配置来适应测试和生产环境是至关重要的。这样的配置能让我们在不同的开发阶段有效管理代码、资源和环境变量。本文将详细介绍如何在Android中创建和管理测试配置以及生产配置的整个过程。环境准备 …...

编程日记 2025/8/11 5:17:18

DBeaver连接hive

DBeaver是一个非常好用的数据库管理工具，支持多种不同的数据库类型。 dbeaver 要连接hive时，数据库驱动是无法下载，但在hive 的安装配置包中，有一个目录：jdbc里面有一个专门提供外部程序连接hive的jar。将这个jar下载…...

编程日记 2025/8/11 16:30:57

数据结构初阶：二叉树（二）

本篇博客主要讲解二叉树---堆的相关知识。 1.实现顺序结构二叉树一般堆使用顺序结构的数组来存储数据，堆是一种特殊的二叉树，具有二叉树的特性的同时，还具备其他的特性。 1.1 堆的概念和结构堆具有以下性质： 堆中某个结点的值…...

编程日记 2025/8/16 3:15:22

React 列表渲染基础示例

React 中最常见的一个需求就是「把一组数据渲染成一组 DOM 元素」，比如一个列表。下面是我写的一个最小示例，目的是搞清楚它到底是怎么工作的。示例代码 // 定义一个静态数组，模拟后续要渲染的数据源 // 每个对象代表一个前端框架&#xf…...

编程日记 2025/8/16 3:16:44

android PackageName ClassName

目录系统应用：设置蓝牙时钟计算机录音机图库视频文件管理 FM 日历谷歌浏览器谷歌商店热门商店国外应用： amazon spotify deezer pandora audible applemusic omnia mxtech youtubemusic facebook familylink tidal tiktok kindle 系统应用：设置 …...

编程日记 2025/8/16 1:39:47

万物对接大模型:【爆火】MCP原理与使用指南

###原文链接 OpenAI、谷歌、微软、阿里云、腾讯云、百度等国内外各大厂商都陆续宣布支持MCP服务。MCP是什么，为什么能获得高度的关注？ MCP(Model Context Protocol,模型上下文协议)是由Anthropic公司(核心产品是Claude大模型)推出的一种开源协议&#xf…...

编程日记 2025/8/14 14:49:28

SAP系统中MD01与MD02区别

知识点普及－MD01与MD02区别 1、从日常业务中，我们都容易知道MD01是运行全部物料，MD02是运行单个物料 2、在做配置测试中，也出现过MD02可以跑出物料，但是MD01跑不出的情况。 3、MD01与MD02的差异: 3.1、只要在物料主数…...

编程日记 2025/8/16 3:16:45

python——字符串使用

目录 1、字符串表示 2、转义字符 （1）将一些具有特殊含义的字符，标识成普通的字符（\） （2）特殊的控制符 （3）（\）还可以表示python中续行符 3、…...

编程日记 2025/8/14 7:35:47

嵌入式ARM RISCV toolchain工具梳理arm-none-eabi-gcc

嵌入式TOOLchain工具梳理简介本文总结和梳理一下一些toolchain的规则和原理，方便后续跨平台的时候，给大家使用toolchain做一个参考。解释如何理解arm-none-eabi-gcc等含义，以及如何一看就知道该用什么编译器。当然如果有哪里写的不是…...

编程日记 2025/8/13 22:35:30

团体程序设计天梯赛PTA-SHU冲刺赛4. L22-L32

这是4.18 SHU备赛天梯赛的最后一场冲刺赛 10.病毒溯源 1.本题PTA中拓栈后会MTL，不拓栈会报非零返回所以本题最好用栈模拟递归过程 2.源头得是入度为0的，也就是没有节点指向它所以得设置inn是否有指向该节点 3.这题用dfs（用bfs的话不同…...

编程日记 2025/8/16 3:18:41

【数据结构与算法】——插入排序

概要本文将介绍插入排序方法——直接插入、希尔排序想了解数据结构其他内容，本人主页恋风诗获取源码，gitte仓库：mozhengy 正文 1.排序的分类目前将主要介绍下面几种排序： 后续学习更多内容后会及时更新 2、插入排序 2…...

编程日记 2025/8/15 11:22:36

手撕STL——vector

目录引言 1，了解 STL 中的 vector 2，先来一个简易版跑起来 2_1，构造函数 2_2，扩容reserve（） 2_3，push_back（） 2_4，pop_back（） …...

编程日记 2025/8/10 1:39:07

新书速览|DeepSeek移动端AI应用开发：基于Android与iOS

《DeepSeek移动端AI应用开发：基于Android与iOS》 1 本书内容《DeepSeek移动端AI应用开发:基于Android与iOS》深入剖析了DeepSeek平台的架构原理、API调用及开发实践等核心内容，助力读者在Android与iOS移动端高效集成DeepSeek API，打造出契…...

编程日记 2025/8/12 18:51:31

详解STM32时基单元中参数 TIM_ClockDivision 的含义

在 STM32 定时器时基单元配置中，TIM_TimeBaseInitStruct->TIM_ClockDivision 用于设置定时器时钟的分频系数，主要影响输入捕获滤波器和输出比较同步信号的时钟分割。以下是其核心作用、参数含义及应用场景的详细解析： 一、核心作用&…...

编程日记 2025/8/12 23:25:11

黑马V11版最新Java高级软件工程师课程-JavaEE精英进阶课

课程大小：60.2G 课程下载：https://download.csdn.net/download/m0_66047725/90615581 更多资源下载：关注我阶段一中台战略与组件化开发专题课程阶段二【物流行业】品达物流TMS 阶段三智牛股阶段四千亿级电商秒杀解决方案专题 …...

编程日记 2025/8/5 9:29:50

【Win】 cmd 执行curl命令时，输出 ‘命令管道位置 1 的 cmdlet Invoke-WebRequest 请为以下参数提供值: Uri: ’ ?

1.原因： 有一个名为 Invoke-WebRequest 的 CmdLet，其别名为 curl。因此，当您执行此命令时，它会尝试使用 Invoke-WebRequest，而不是使用 curl。 2.解决办法在cmd中输入如下命令删除这个curl别名： Remov…...

编程日记 2025/8/5 12:02:12

【k8s系列4】工具介绍

1、虚拟机软件 vmware workstation 2、shell 软件 MobaXterm 3、centos7.9 下载地址 （https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/?spma2c6h.25603864.0.0.374bf5adOaiFPW） 4、上网软件...

编程日记 2025/8/13 4:05:06

设计模式 --- 装饰器模式

装饰模式是一种结构型设计模式，它允许向一个现有的对象添加新的功能，同时又不改变其结构。这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。优点： 1.灵…...

编程日记 2025/8/15 9:57:18

docker.desktop下安装普罗米修斯prometheus、grafana并看服务器信息

目标在docker.desktop下先安装这三种组件，然后显示当前服务的CPU等指标。各种坑已踩，用的是当前时间最新的镜像核心关系概述组件角色依赖关系Prometheus开源监控系统，负责数据采集、存储、查询及告警。依赖 Node-Exporter 提供的指标数据。Node-Exporter专用的数据采集…...

编程日记 2025/8/5 10:45:51

学习设计模式《二》——外观模式

一、基础概念 1.1、外观模式的简介外观模式的本质是【封装交互、简化调用】； 外观模式的说明：就是通过引入一个外观类，在这个类里面定义客户端想要的简单方法，然后在这些方法里面实现；由外观类再去分别调用内部的多个…...

编程日记 2025/8/14 16:29:33

python中，处理多分类时，模型之间的参数设置

在Python的机器学习库中，处理多分类问题时，不同的模型可能会有不同的参数设置来适应多分类场景。这里列举几个常见模型及相关的多分类参数： 1. Logistic Regression (逻辑回归) 在Scikit-Learn库中，逻辑回归模型可以通过设置mul…...

编程日记 2025/8/13 1:26:15

2025年03月中国电子学会青少年软件编程（Python）等级考试试卷（四级）真题

青少年软件编程（Python）等级考试试卷（四级） 分数：100 题数：38 答案解析：https://blog.csdn.net/qq_33897084/article/details/147341407 一、单选题(共25题，共50分) 1. 下列程序段…...

编程日记 2025/8/14 12:58:02

蓝桥杯12. 日期问题

日期问题原题目链接题目描述小明正在整理一批历史文献。这些历史文献中出现了很多日期。小明知道这些日期都在 1960 年 1 月 1 日至 2059 年 12 月 31 日之间。令小明头疼的是，这些日期采用的格式非常不统一： 有的采用年/月/日有的采用月…...

编程日记 2025/8/13 1:34:31

【MATLAB代码例程】AOA与TOA结合的高精度平面地位，适用于四个基站的情况，附完整的代码

本代码实现了一种基于到达角（AOA）和到达时间（TOA）的混合定位算法，适用于二维平面内移动或静止目标的定位。通过4个基站的协同测量，结合最小二乘法和几何解算，能够有效估计目标位置，并支持噪声模拟、误差分析和可视化输出。适用于室内定位、无人机导航、工业监测等场景…...

编程日记 2025/8/15 8:49:07

ARINC818协议(五)

1.R_CTL,设置固定的0x44即可 2.Dest_ID:目的地D_ID,如果不需要目的地址，就设置为0；ADVB协议支持多个视频目的地址，广播通信; 3.cs_ctl在FC-AV上不用 4.source_ID:S_ID [23:0]包含源实体的端口的地址标识；不用就设置为0. ADVB允许…...

编程日记 2025/8/15 2:33:34

国产品牌芯洲科技100V降压芯片系列

SCT2A25采用带集成环路补偿的恒导通时间(COT)模式控制，大大简化了转换器的片外配置。SCT2A25具有典型的140uA低静态电流，采用脉冲频率调制(PFM)模式，它使转换器在轻载或空载条件下实现高转换效率。芯洲科技100V降压芯片系列提供丰富的48V系…...

编程日记 2025/8/16 0:39:58

遨游科普：三防平板除了三防特性？还能实现什么功能？

在工业4.0浪潮席卷全球的今天，电子设备的功能边界正经历着革命性突破。三防平板电脑作为"危、急、特"场景的智能终端代表，其价值早已超越防水、防尘、防摔的基础防护属性。遨游通讯通过系统级技术创新，将三防平板打造为集通信中枢、…...

编程日记 2025/8/14 23:34:09

边缘计算网关组态功能的定义

边缘计算网关组态功能的定义边缘计算网关组态是指根据特定的应用场景和需求，对边缘计算网关进行配置和定制的过程。它涵盖了硬件接口的选择、软件功能的设定、通信协议的配置以及数据处理流程的设计等多个方面，旨在使网关设备更加贴合实际应用场景&…...

编程日记 2025/8/10 19:55:40

数据可视化笔记：柱状图

数据可视化笔记：柱状图与饼图 1.1 一、基础配置在进行数据可视化之前，需要对Matplotlib进行一些基础配置，以确保图表能够正确显示中文以及设置合适的分辨率和大小。 from matplotlib import pyplot as plt import numpy as np# 设置中文字…...

编程日记 2025/8/14 21:40:27

珈和科技：无人机技术赋能智慧农业，精准施肥与病虫害监控全面升级

无人机技术在农业领域的兴起，是现代技术发展为传统农业带来的重要变革。目前， 无人机已成为农业生产中不可或缺的关键工具，在提高粮食产量、改善土壤健康和保护生态环境等方面提供了新的解决方案。珈和科技从无人机的类型、特点和监测系统入手…...

编程日记 2025/8/10 20:09:30

UR5e机器人动力学

机器人动力学研究力与运动之间的关系，核心目标是建立关节力矩与关节位置、速度、加速度的数学关系。动力学模型通常分为：正向动力学：已知关节力矩，计算末端执行器的运动（加速度）。逆向动力学：已知期望的运动（位置、速度、加速度），计算所需的关节力矩。 https://www…...

编程日记 2025/8/6 12:48:54

【go】什么是Go语言的GPM模型？工作流程？为什么Go语言中的GMP模型需要有P?

Go语言GMP调度模型详解一、GMP模型核心概念 Go语言的GMP模型是一种高效的轻量级线程管理调度系统，由三个核心组件构成： G (Goroutine)： 轻量级协程，初始栈仅2KB（可动态扩容）用户态调度，创建成…...

编程日记 2025/8/12 21:32:40

X-AnyLabeling开源程序借助 Segment Anything 和其他出色模型的 AI 支持轻松进行数据标记。

一、软件介绍文末提供源码和程序下载学习使用 X-AnyLabeling开源程序可以导入、管理和保存数据。用户可以通过多种方式导入图像和视频文件，包括快捷方式或菜单选项。此外，它还涵盖数据删除、图像切换以及标签和图像数据的保存，以确保高效…...

编程日记 2025/8/10 23:33:15

简易 Python 爬虫实现，10min可完成带效果源码

目录准备工作编写爬虫代码运行爬虫查看结果遇到的问题及解决总结前言和效果本文记录了使用 Python 实现一个简单网页爬虫的过程，目标是爬取 quotes.toscrape.com 的名言和作者，并将结果保存到文本文件。以下是完整步骤，包含环境…...

编程日记 2025/8/14 5:10:57

全志H5,NanopiKP1lus移植QT5.12记录

移植步骤机器环境下载QT5.12.0源码安装交叉编译器修改qmake.conf文件配置编译选项qt5的configure选项说明基本配置选项编译器和链接器选项功能模块配置第三方库集成注意事项配置过程报错解决配置完成编译过程报错解决编译完成将arm-qt文件夹传送到开发板配置板子环境变量运行…...

编程日记 2025/8/12 6:31:43

Spring Boot 依赖注入与Bean管理：JavaConfig如何取代XML？

大家好呀！今天我们来聊一个超级实用的技术话题 —— Spring Boot 中的依赖注入和Bean管理，特别是JavaConfig是如何一步步取代XML配置的。我知道很多小伙伴一听到"依赖注入"、"Bean管理"这些词就头大，别担心！我…...

编程日记 2025/8/15 1:34:36

AUTOSAR图解==＞AUTOSAR_SWS_E2ETransformer

AUTOSAR E2E Transformer详解基于AUTOSAR标准的端到端通信保护变换器技术解析目录 1. E2E Transformer概述 1.1 E2E Transformer的作用1.2 功能特点1.3 应用场景限制 2. 模块架构 2.1 架构设计2.2 与其他模块的关系 3. 初始化与状态机 3.1 模块状态流转3.2 初始化与去初始化…...

编程日记 2025/8/12 15:29:30

从Archery到NineData：积加科技驱动数据库研发效能与数据安全双升级

积加科技作为国内领先的企业级数字化解决方案服务商，依托自研的 A4X 数字化平台（https://a4x.io/），专注于为全球范围内的视觉物联网（IoT）设备提供 PaaS/SaaS 服务。致力于运用 AI 技术赋能物联网世界的各类…...

编程日记 2025/8/5 12:01:54

hadoop和Yarn的基本介绍

Hadoop的三大结构及各自作用？ Hadoop是一个由Apache基金会开发的分布式系统基础架构，主要用于处理大规模数据集的分布式存储和计算。Hadoop的三大核心结构是HDFS（Hadoop Distributed File System）、MapReduce和YARN（Y…...

编程日记 2025/8/16 1:40:00

神经接口安全攻防：从技术漏洞到伦理挑战

随着脑机接口（BCI）技术的快速发展，神经接口设备已从实验室走向消费市场。然而，2025年曝光的某品牌脑机接口设备漏洞（CVE-2025-3278）引发了行业对神经数据安全的深度反思。本文围绕神经接口安全的核心矛盾&a…...

编程日记 2025/8/12 1:23:55

云轴科技ZStack入选中国人工智能产业发展联盟《大模型应用交付供应商名录》

2025年4月8日至9日，中国人工智能产业发展联盟（以下简称AIIA）第十四次全体会议暨人工智能赋能新型工业化深度行（南京站）在南京召开。工业和信息化部科技司副司长杜广达，中国信息通信研究院院长、中国人工智能…...

编程日记 2025/8/13 15:31:02

SpringBoot项目异常处理

一、异常问题描述进行添加员工测试的时候，服务端报错， 报错信息如下： java.sql.SQLIntegrityConstraintViolationException:主要就是因为在 employee 表结构中，我们针对于username字段，建立了唯一索引，添…...

编程日记 2025/8/15 4:31:05

机器学习05-CNN

CNN（卷积神经网络）学习文档一、引言卷积神经网络（Convolutional Neural Network，CNN）是深度学习中的一种重要网络结构，在图像识别、计算机视觉等领域取得了巨大成功。CNN 的设计灵感来源于生物视觉系统…...

编程日记 2025/8/11 22:13:51

Java Web 之 Servlet 100问

Filter 是什么？ 在Java Web开发中，Filter（过滤器）是一种用于在请求到达目标资源（如Servlet、JSP）之前或响应返回客户端之前进行预处理和后处理的组件。Filter可以拦截请求和响应，执行特定的操作…...

编程日记 2025/8/11 9:58:29

z-library电子图书馆最新地址的查询方法

对于喜欢读书的伙伴们，应该都听说过z站（z-library），优点多多，缺点就是地址不稳定，经常会变化网站地址。然后我最近发现了一个工具，可以不间断更新官方可用的z站地址：电子书最新地址...

编程日记 2025/8/8 10:14:53

PyCharm入门导览

一、项目视图项目视图位置如下所示： 项目视图是主要工具窗口之一。它包含项目目录、SDK特定的外部库和临时文件。点击带条纹的按钮可以预览演示项目。也可以按Alt 1 打开。二、Python解释器点击右下角项目的名字，可以快速进入【Python解释器】界面…...

编程日记 2025/8/15 1:09:40

1. 安装 js-cookie

2. 在组件里引入并使用 js-cookie

全局引入

局部引入

相关文章：

1. 安装 `js-cookie`

2. 在组件里引入并使用 `js-cookie`