试试试试
试试试试
  • 发布:2025-06-22 23:25
  • 更新:2025-06-23 17:43
  • 阅读:49

hx创建的vue3小程序项目,使用pinia出现的问题

分类:uni-app

hx创建的vue3微信小程序项目,使用组合式api <script setup> 出现的问题

一、热更新问题
根据文档 状态管理-pinia 的说明
这个是支持热更新的

热模块更换
· 不必重载页面即可修改 Store

但在实际开发中,如果修改store中的代码,小程序开发者工具会有更新动作,但修改的代码并不会生效。必须点【编译】重新编译才行(只刷新页面都不行),这个就很影响效率了。

二、异步导入问题
微信小程序支持 require.async 的方式异步导入文件。
但是文件如果没有使用import的方式导入过,在编译的时候,这个文件就会被忽略,导致无法异步导入。
普通的js文件可以存放在 static 目录中,防止被忽略,但是 store 文件只能放在 stores目录,不能移到 static 目录。

所以 require.async 只能导入 已经 import 的 store 文件,能使用的场景大幅减少

要怎么设置,才能让 stores 目录下的文件,在编译时不会被忽略?

2025-06-22 23:25 负责人:无 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

第一个问题提供个复现工程。并说明 options 写法是否有无问题
第二个问题提供复现工程和操作方法。什么时候需要动态引入逻辑?现在文件实际是否参与了编译,可供微信小程序使用?并说明 options 写法是否有无问题

  • 试试试试 (作者)

    一、排查了应该是微信开发者工具【代码热重载】设置的冲突

    二、示例代码和详细说明都写在单独的回复中了

    2025-06-23 17:44

试试试试

试试试试 (作者)

二、异步导入问题 代码示例

1、根据官方文档引入 pinia

// main.js  

import * as Pinia from 'pinia';  
export function createApp() {  
    const app = createSSRApp(App)  
    app.use(Pinia.createPinia());  
    return {  
        app,  
        Pinia  
    }  
}

2、根据文档示例,新建store

// stores/counter.js  
import {  
    defineStore  
} from 'pinia';  

import {  
    ref  
} from 'vue'  

export const useCounterStore = defineStore('counter', () => {  
    const count = ref(0)  

    function increment() {  
        count.value = count.value + 1;  
    }  
    return {  
        count,  
        increment  
    };  
});  

3、在主页通过 微信小程序的 require.async 导入store。

会出现报错:

{errMsg: "module 'stores/counter.js' is not defined, require args is 'stores/counter.js'", mod: "stores/counter.js"}

同时开发者工具的资源管理器中,也没有出现 stores/counter.js 这个文件

// pages/index/index.vue  

<script setup>  
    import {  
        onLoad  
    } from '@dcloudio/uni-app'  

    onLoad(async () => {  
        let file = await require.async(`../../stores/counter.js`)  
        console.log(111, file);  
        counter = file.useCounterStore()  
        console.log(222, counter);  
    })  
</script>  

4、作为对比,新建一个页面,在新页面静态导入这个store


// pages/test/test.vue  

<script setup>  
     import {  
         useCounterStore  
     } from '@/stores/counter'  
     const counter = useCounterStore()  

</script>  

然后重新编译后,3 中的异步导入就能正常执行了
同时开发者工具的资源管理器中,也出现了 stores/counter.js 这个文件


所以,希望在只使用 require.async 的情况下,也能正常编译对应文件

普通的js文件,虽然能通过移动到static中,来确保不被忽略,但会打乱整体的文件结构。
而store文件,是不支持移动到static中的。

要回复问题请先登录注册