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>