微信二维码网站建设网站查询工具
抛砖引玉:
如果在开发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>