vue3 如何调用第三方npm包内部的 pinia 状态管理库方法
抛砖引玉:
如果在开发vue3项目是, 引用了npm第三方包 ,而且这个包内使用了Pinia 状态管理库,那我们如何去调用 npm内部的 Pinia 状态管理库呢?
实际遇到的问题:
今天在制作npm包时遇到的问题,之前Vue2版本的时候状态管理库用的Vuex ,当时调用npm包内的状态管理库很简单,直接引用包内的store就行了.
但是Vue3 里的Pinia 就不一样了,可能也是第一次遇到这种问题,卡了我一个多小时, 这时候Ai都不好使了,最后还是脑洞大开自己解决了.
整体代码如下:
# 第一步,引用第三方npm包"microi-pageengine": "^1.1.0",# 第二步, 调用包内暴露的接口import { formDesigner, EventBus, usePageEngineStore } from 'microi-pageengine' //导入
import 'microi-pageengine/style.css' //引入组件相关样式# 第三步 ,调用组件<template><!-- 页面设计器 --><formDesigner :remoteObj="remoteObj" /><!-- 页面渲染器 --><!-- <formRenderer :remoteObj="remoteObj" /> -->
</template># 第四步
<script setup>
```省略其他代码//这里就是调用第三方npm包内部的pinia状态机方法体,然后就报错了const pageEngineStore = usePageEngineStore()pageEngineStore.setToken('')```省略其他代码
</script>

我尝试了各种方法都不行,折腾了好久,后来这样改就好了,要把自己的pinia以参数的形式传给它才行
const pageEngineStore = usePageEngineStore( pinia ) // 这个参数是精髓
<script setup>
```其他省略import { createPinia } from 'pinia'
const pinia = createPinia()import { formDesigner, EventBus, usePageEngineStore } from 'microi-pageengine' //导入
import 'microi-pageengine/style.css' //引入组件相关样式const pageEngineStore = usePageEngineStore(pinia) //这句使精髓```其他省略</script>
相关文章:
vue3 如何调用第三方npm包内部的 pinia 状态管理库方法
抛砖引玉: 如果在开发vue3项目是, 引用了npm第三方包 ,而且这个包内使用了Pinia 状态管理库,那我们如何去调用 npm内部的 Pinia 状态管理库呢? 实际遇到的问题: 今天在制作npm包时遇到的问题,之前Vue2版本的时候状态管理库用的Vuex ,当时调用npm包内的状态管理库很简单,直接引…...
uni-app快速入门(七)--组件路由跳转和API路由跳转及参数传递
uni-app有两种页面路由跳转模式,即使用navigator组件跳转和调用API跳转,API调转不要理解为调用后台接口的API,而是指脚本函数中使用跳转函数。 一、组件路由跳转 1.1 打开新页面 打开新页面使用组件的open-type"navigate",见下面…...
Flink升级程序和版本
Flink DataStream程序通常设计为长时间运行,如几周、几个月甚至几年。与所有长时间运行的服务一样,Flink streaming应用程序也需要维护,包括修复错误、实现改进或将应用程序迁移到更高版本的Flink集群。 这里就来描述下如何更新Flink streaming应用程序,以及如何将正在运行…...
从0安装mysql server
安装 MySQL Server 首先,你需要在 Ubuntu 上安装 MySQL 服务器。运行以下命令来安装:sudo apt update sudo apt install mysql-server安装完成后,MySQL 服务会自动启动。你可以通过以下命令检查 MySQL 服务是否正在运行: sudo systemctl status mysql如果 MySQL 正在运行,…...
web安全测试渗透案例知识点总结(上)——小白入狱
目录 一、Web安全渗透测试概念详解1. Web安全与渗透测试2. Web安全的主要攻击面与漏洞类型3. 渗透测试的基本流程 二、知识点详细总结1. 常见Web漏洞分析2. 渗透测试常用工具及其功能 三、具体案例教程案例1:SQL注入漏洞利用教程案例2:跨站脚本ÿ…...
PHP访问NetSuite REST Web Services
“同等看待欢乐和痛苦、得到和失去、胜利和失败、投入战斗。以此方式履行职责,你就不会招致任何罪恶。” -Bhagavad Gita 为了帮助PHP开发者快速起步,以REST Web Services方式打通与NetSuite的接口,我们答应给一个样例。但是我是不懂PHP的&a…...
【编译】多图解释 什么是短语、直接短语、句柄、素短语、可归约串
一、什么是短语二、什么是“直接”短语?三、什么是句柄?四、什么是素短语?五、什么是最左素短语可归约串就是“最左素短语” 首先,这些概念 都是相对于【句型】的,都是相对于【句型】的,都是相对于【句型】…...
React中事件绑定和Vue有什么区别?
1. 绑定方式 React:使用jsx语法,通过属性绑定事件。Vue:使用指令(如v-on)在模板中直接绑定事件。 2. 事件处理 React:通过合成事件系统封装原生事件,提供统一的API。Vue:直接使用…...
【DBA攻坚指南:左右Oracle,右手MySQL-学习总结】
处理log file sync等待事件 首先明确什么是log file sync等待事件 从用户提交会话开始,LGWR进程将redo缓存中的信息写入redo日志文件后,LGWR进程通知用户写操作完成,到用户会话接受到LGWR进程通知为止,这整个过程就是可能出现lo…...
C++中的内联函数
在C中,内联函数是一种特殊的函数。 定义 内联函数是在函数定义前加上关键字“inline”的函数。编译器在处理对内联函数的调用时,会尝试将函数体的代码直接插入到函数调用处,而不是像普通函数调用那样,进行跳转指令执行函数体代码…...
ssh.service could not be found“
如果你收到 “ssh.service could not be found” 错误,说明目标主机上没有安装 SSH 服务,或者安装的 SSH 服务的名称不为 ssh。这里有一些解决步骤: 1. 检查 SSH 服务是否已安装 在目标主机上执行以下命令来检查是否安装了 SSH 服务&#x…...
tensorflow有哪些具体影响,和chatgpt有什么关系
### TensorFlow的影响 **1. 深度学习框架的领军者** - **广泛使用**: TensorFlow是由Google开发的开源深度学习框架,广泛应用于各种机器学习任务,包括图像识别、自然语言处理、语音识别等。它是深度学习领域中最受欢迎的框架之一。 - **大规模生产环境*…...
Android OpenGL ES详解——几何着色器
目录 一、概念 1、图元 2、几何着色器 1、输入类型 2、输出类型 3、输出顶点数量最大值限制 二、使用几何着色器 三、应用举例——造几个房子 四、应用举例——爆破物体 1、获取法向量 2、显示法线 五、应用举例——细分三角形 六、应用举例——广告牌技术 一、概…...
Java学生管理系统(GUI和数据库)
Java学生管理系统(GUI和数据库) 本文简介 本资源演示了一个用Java实现的学生管理系统,结合了图形用户界面(GUI)和数据库操作。系统实现了学生、课程和账号三张表的管理功能,包括增删改查等操作。通过本资…...
035_Progress_Dialog_in_Matlab中的进度条对话框
进度条 概念 在使用Matlab开发界面时,有一个很好用的工具就是进度条。在计算过程中,为用户提供计算进度的反馈是改善用户体验的重要手段。 一项进行的计算任务,如果其总体进度是比较容易量化,则可以按照0%~100%的方式࿰…...
【GPTs】Ai-Ming:AI命理助手,个人运势与未来发展剖析
博客主页: [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 💯GPTs指令💯前言💯Ai-Ming主要功能适用场景优点缺点 💯小结 💯GPTs指令 中文翻译: defcomplete_sexagenary(年&a…...
如何利用SAP低代码平台快速构建企业级应用?
SAP作为全球领先的企业管理软件解决方案提供商,一直致力于为企业提供全面且高效的业务管理工具。随着技术的快速发展,传统的开发方式已经无法满足企业在快速变化的市场环境下的需求。低代码开发平台应运而生,它通过简化应用程序的创建过程&am…...
Redis设计与实现 学习笔记 第十七章 集群
Redis集群是Redis提供的分布式数据库方案,集群通过分片(sharding,水平切分)来进行数据共享,并提供复制和故障转移功能。 17.1 节点 一个Redis集群通常由多个节点(node)组成,在刚开…...
多端校园圈子论坛小程序,多个学校同时代理,校园小程序分展示后台管理源码
社团活动与组织 信息发布:系统支持社团发布活动信息、招募新成员等,方便社团进行线上线下活动的组织和管理。 增强凝聚力:通过系统,社团成员可以更好地交流和互动,增强社团的凝聚力和影响力。 生活服务功能 二手市场…...
鸿蒙核心技术理念
文章目录 1)一次开发,多端部署2)可分可合,自由流转3)统一生态,原生智能1)一次开发,多端部署 “一次开发,多端部署”指的是一个工程,一次开发上架,多端按需部署。目的是支撑开发者高效地开发多种终端设备上的应用 2)可分可合,自由流转 元服务是鸿蒙系统提供的一…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
Spring Boot 实现流式响应(兼容 2.7.x)
在实际开发中,我们可能会遇到一些流式数据处理的场景,比如接收来自上游接口的 Server-Sent Events(SSE) 或 流式 JSON 内容,并将其原样中转给前端页面或客户端。这种情况下,传统的 RestTemplate 缓存机制会…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
