elpis DSL领域模型开发时,引入pinia处理模版数据时报错
代码
menu.js
js
const { defineStore } = require('pinia') ;
import { ref } from 'vue';
export const useMenuStore = defineStore('menu',()=>{const menuList = ref([])})
business.js
js
import {useMenuStore} from './menu.js'
const menuStore = useMenuStore()
报错信息:
getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
报错提示为useMenuStore
在app.use(pinia)
之前运行了
问题分析:getActivePinia()
为检查当前是否存在活跃实例。webpack打包正常,node环境运行正常,浏览器访问报错。说明是运行时问题,boot.js中有app.use(pinia)实例化。最终定位menu.js 文件 cmj 和esm混用导致
问题解析:
cmj和esm加载时机
CommonJS
: 同步加载,运行时确认依赖。
ESM
: 异步加载,编译时编译确认依赖。
总结:
在webpack 编译时 定义好了useMenuStore ,但是没有 执行const { defineStore } = require('pinia') ; 。在运行时才执行const { defineStore } = require('pinia') ; 但是useMenuStore 早已经定义好,而此时business.js
已经提前调用了useMenuStore()
,导致Pinia实例未激活。
解决方案
将const { defineStore } = require('pinia')
; 替换为import { defineStore } from 'pinia'
;