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>  

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

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

相关文章

AWTK-WIDGET-WEB-VIEW 实现笔记 (4) - Ubuntu

Ubuntu 上实现 AWTK-WIDGET-WEB-VIEW 开始以为很简单&#xff0c;后来发现是最麻烦的。因为 Ubuntu 上的 webview 库是 基于 GTK 的&#xff0c;而 AWTK 是基于 X11 的&#xff0c;两者的窗口系统不同&#xff0c;所以期间踩了几个大坑。 1. 编译 AWTK 在使用 Linux 的输入法时…

C++之内存管理

​ &#x1f339;个人主页&#x1f339;&#xff1a;喜欢草莓熊的bear &#x1f339;专栏&#x1f339;&#xff1a;C入门 目录 前言 一、C/C内存分配 二、 malloc、calloc、realloc、free 三、C内存管理方式 3.1 new/delete 操作内置类型 3.2 new和detele操作自定义类型…

Visual Studio 2017 快捷键设置-批量注释和批量取消注释

一.批量注释设置&#xff1a; 1&#xff09;打开Visual Studio 2017,点击菜单栏中的“工具”&#xff0c;然后选中“选项”&#xff1a; 2&#xff09;选中“键盘”&#xff0c;在“显示命令包含”输入框中输入“注释”&#xff1a; 3&#xff09;选中“编辑&#xff1a;注释选…

从零入门激光SLAM(二十三)——direct_visual_lidar_calibration全型号激光雷达-相机标定包

大家好呀&#xff0c;我是一个SLAM方向的在读博士&#xff0c;深知SLAM学习过程一路走来的坎坷&#xff0c;也十分感谢各位大佬的优质文章和源码。随着知识的越来越多&#xff0c;越来越细&#xff0c;我准备整理一个自己的激光SLAM学习笔记专栏&#xff0c;从0带大家快速上手激…

蓝桥杯备赛(持续更新)

16届蓝桥杯算法类知识图谱.pdf 1. 格式打印 %03d&#xff1a;如果是两位数&#xff0c;将会在前面添上一位0 %.2f&#xff1a;会保留两位小数 如果是long&#xff0c;必须在数字后面加上L。 2. 进制转化 2.1. 十进制转任意进制&#xff1a; 十进制转任意进制时&#xff…

【STL】set,multiset,map,multimap的介绍以及使用

关联式容器 在C的STL中包含序列式容器和关联式容器 1.关联式容器&#xff1a;它里面存储的是元素本身&#xff0c;其底层是线性序列的数据结构&#xff0c;比如&#xff1a;vector&#xff0c;list&#xff0c;deque&#xff0c;forward_list(C11)等 2.关联式容器里面储存的…

螺旋矩阵II(leetcode 59)

转圈过程&#xff08;边界处理&#xff09;遵循循环不变量的原则&#xff0c;坚持一个原则处理每一条边&#xff0c;左闭右开处理 class Solution { public:vector<vector<int>> generateMatrix(int n) {vector<vector<int>> num(n, vector<int>…

MCU的时钟体系

stm32F4的时钟体系图 1MHZ 10^6 HZ 系统时钟频率是168MHZ;AHB1、AHB2、AHB3总线上的时钟频率是168MHz;APB1总线上的时钟频率为42MHz&#xff1b;APB2总线上的时钟频率为84MHz&#xff1b; stm32F4的时钟体系图 在system_stm32f4xx.c文件中查看APB1和APB2的预分频值到底是多少…

走进嵌入式开发世界

目录 一、概述 二、嵌入式开发的核心要素 2.1. 硬件平台选择与设计 2.1.1. 处理器选择 2.1.2. 电路设计 2.1.3.硬件集成与测试 2.2. 软件开发与调试 2.2.1. 编程语言选择 2.2.2. 操作系统与中间件 2.2.3. 软件架构与模块化设计 2.2.4. 调试与测试 三、系统优化与功…

SpringCloud篇(服务网关 - GateWay)

目录 一、简介 二、为什么需要网关 二、gateway快速入门 1. 创建gateway服务&#xff0c;引入依赖 2. 编写启动类 3. 编写基础配置和路由规则 4. 重启测试 5. 网关路由的流程图 6. 总结 三、断言工厂 四、过滤器工厂 1. 路由过滤器的种类 2. 请求头过滤器 3. 默认…

技术理论||02空中三角测量

空中三角测量指的是根据少量控制点坐标,利用空间前后交汇,对六个外方位要素进行解算,从而获得大量未知点坐标及图像外方位要素。空三测量精度是整个摄影测量过程中的关键环节,空三解算的精度直接影响到数字正射图像、实景三维模型等数字化成果的质量。在空三加密的平差解算中,主…

OpenTelemetry 赋能DevOps流程的可观测性革命

作者&#xff1a;天颇 引言 在当今快节奏的软件开发和运维环境中&#xff0c;DevOps 已经成为主流&#xff0c;它通过整合开发和运维流程&#xff0c;推动着软件的快速迭代和持续交付。然而&#xff0c;随着微服务、容器化和云计算等技术的普及&#xff0c;系统复杂性急剧增加…

大数据如何助力干部选拔的公正性

随着社会的发展和进步&#xff0c;干部选拔成为组织管理中至关重要的一环。传统的选拔方式可能存在主观性、不公平性以及效率低下等问题。大数据技术的应用&#xff0c;为干部选拔提供了更加全面、精准、客观的信息支持&#xff0c;显著提升选拔工作的科学性和公正性。以下是大…

风电电力系统低碳调度论文阅读第一期

在碳交易市场中&#xff0c;历史法和基准线法是用于分配碳排放配额的两种主要方法。以下是两种方法的公式及其解释&#xff1a; 区别总结 历史法&#xff1a;基于历史排放量&#xff0c;分配具有较强的公平性但可能缺乏激励减排。基准线法&#xff1a;基于行业基准和生产量&am…

PHP代码审计 --MVC模型开发框架rce示例

MVC模型开发框架 控制器Controller&#xff1a;负责响应用户请求、准备数据&#xff0c;及决定如何展示数据 模块Model&#xff1a;管理业务逻辑和数据库逻辑&#xff0c;提供链接和操作数据库的抽象层 视图View&#xff1a;负责前端模板渲染数据&#xff0c;通过html呈现给用户…

RT-Thread 星火1号学习笔记

LED 闪烁例程 硬件说明 LED 连接在开发板的某个 GPIO 端口上&#xff0c;通过控制该端口的高低电平来实现 LED 的亮灭。 软件说明 初始化 GPIO 端口 /* 配置 LED 灯引脚 */ #define PIN_LED_B GET_PIN(F, 11) // PF11 : LED_B --> LED #defi…

c++调用 c# dll 通过 clr (详细避坑)

项目场景&#xff1a; .NET Framework 4.7.2 需要在纯C项目中调用C# 的DLL C# DLL 在.NET core 或者 .NET 8 中无法使用AOT正常导出DLL 解决方案&#xff1a; 通过 用 C/clr 项目中转 来调用 1.在c# .NET Framework项目中把接口写好&#xff0c; 这里不推荐使用 .NET 8&#…

【动手学深度学习Pytorch】1. 线性回归代码

零实现 导入所需要的包&#xff1a; # %matplotlib inline import random import torch from d2l import torch as d2l import matplotlib.pyplot as plt import matplotlib import os构造人造数据集&#xff1a;假设w[2, -3.4]&#xff0c;b4.2&#xff0c;存在随机噪音&…

论文笔记(五十六)VIPose: Real-time Visual-Inertial 6D Object Pose Tracking

VIPose: Real-time Visual-Inertial 6D Object Pose Tracking 文章概括摘要I. INTRODACTIONII. 相关工作III. APPROACHA. 姿态跟踪工作流程B. VIPose网络 文章概括 引用&#xff1a; inproceedings{ge2021vipose,title{Vipose: Real-time visual-inertial 6d object pose tra…

web——upload-labs——第三关——后缀黑名单绕过

上传一个正常的一句话木马&#xff0c;判断一下验证类型 响应后返回提示不允许上传.asp,.aspx,.php,.jsp后缀文件&#xff01; 且查看网页源代码中并没有前端验证机制&#xff0c;所以可以判断这道题是后端验证 使用burp 提示无法上传.php结尾的文件&#xff0c;但我们的一句…