抛砖引玉:
如果在开发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> 
