Medal
Medal
  • 发布:2024-01-13 12:00
  • 更新:2024-03-06 22:13
  • 阅读:604

vue3 + setup + ts + pinia 调用 stores 时,类型推导的内容错误,但实际执行正确

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows 10

HBuilderX类型: 正式

HBuilderX版本号: 3.99

第三方开发者工具版本号: 1.06

基础库版本号: 3.3.1

项目创建方式: HBuilderX

示例代码:

一个简单的 stores:

import { ref } from 'vue';  
import { defineStore } from 'pinia';  

export const useUserInfoStore = defineStore('userInfoStore', () => {  
    const authTokenData = ref();  

    function $reset() {  
        authTokenData.value = '';  
    }  

    return {  
        authTokenData,  
        $reset,  
    };  
});

vue 页面:

<script setup lang="ts">  
import { ref } from 'vue';  
import { onShow } from '@dcloudio/uni-app';  
import { useUserInfoStore } from '@/stores/userInfoStore';  

const userInfoStore = useUserInfoStore();  
userInfoStore.authTokenData = '无可用网络连接1';  
...

在函数中:

...  
const userInfoStore = useUserInfoStore();  

    async function request<T = any>(options: HttpOptionsNew) {  
        userInfoStore.authTokenData = '无可用网络连接2';  
...

操作步骤:

无特殊操作,正常 pinia 创建和调用

预期结果:

编辑器正常提示,编译运行正常。

实际结果:

编辑器类型推导提示不能赋值,需要加 .value,但是实际编译运行正常

bug描述:

编辑器类型推导 userInfoStore.authTokenData 提示类型错误,需要加.value,但是按照语法肯定不能加。

然而实际可以通过编译,输出正常。

2024-01-13 12:00 负责人:DCloud_UNI_OttoJi 分享
已邀请:

最佳回复

DCloud

DCloud

HBuilderX 4.02.2024030621-alpha 已修复。

DCloud_UNI_OttoJi

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

感谢反馈,还提供了复现代码,接下来我看一下这个问题

更新:
我分别使用最先版本的 hbuilderx 和 vscode 跑你提供的代码,唯一的改动是给 authTokenData 默认复制 '' 空字符串。

整体运行和测试,没有遇到编辑器爆红的情况,也欢迎你提供复现工程,复现工程包含对应的 npm 依赖。或者升级到最新正式版、Alpha 版本来验证。

也环境直接给我私信、评论补充更多信息

  • Medal (作者)

    非常感谢您的热情回复 !

    这个问题我也反馈到了咱 BUG 系统。现在问题已经被确认。


    BUG 原因分类:测试例覆盖不全

    BUG 详细原因:uniapp项目安装了三方node_modules,依赖了vue,且vue版本和内置vue版本不匹配,导致类型冲突

    解决方案:治根

    修复方案简述:1. 内置vue库区分开vue2和3 2. 相关引用vue的库也分别区分开,如pinia 3. 已经内置的库类型一律使用内置的库文件的类型

    修复方案的测试力度:常见情况测试

    测试例和自动化测试脚本:已补测试例和自动化测试脚本

    相关模块:本模块是独立模块,改动不涉及其他模块

    举一反三:是,vue类型不匹配导致pinia类型推导失败,从而导致pinia类型提示不对


    您看还需要我配合做什么?

    2024-03-05 20:05

  • DCloud_UNI_OttoJi

    回复 Medal: 哦哦,原来如此。这样的话就等待后续发版了,后续 hbuidlerx 升级时候更新日志会有体现,如果还有问题,欢迎继续反馈

    2024-03-05 20:38

  • DCloud_UNI_OttoJi

    回复 Medal: issues 地址可以发一下吗?我补充到这个问题的解决方案里

    2024-03-05 20:43

  • Medal (作者)

    回复 DCloud_UNI_OttoJi: https://issues.dcloud.net.cn/pages/issues/detail?id=720


    另外还有这个问题,一直挂在哪里,没有进度,不知道您负不负责~

    https://issues.dcloud.net.cn/pages/issues/detail?id=576

    2024-03-06 19:44

Medal

Medal (作者)

这个如果是我操作错误,也请官方明确。

  • zZZ1Ma

    删除最新回复了?

    2024-02-19 15:27

  • zZZ1Ma

    我用4.01试了下仍然bug

    2024-02-19 15:35

  • Medal (作者)

    回复 zZZ1Ma: 因为 是其他HBX的bug产生的上游报错,导致还没解析到这个报错,就没提示,我没细看以为没问题了。所以是我测试错误,删除结论了 :)

    2024-03-06 19:46

Medal

Medal (作者)

如果是我操作问题,还请大家帮忙指出

  • zZZ1Ma

    应该是BUG,改用options语法可行,composition语法则不行

    2024-01-30 17:07

  • zZZ1Ma

    用这个demo试试https://stackblitz.com/github/piniajs/example-vue-3-vite?file=README.md,新增两个不同语法的模块

    2024-01-30 17:09

  • Medal (作者)

    回复 zZZ1Ma: 非常感谢!

    2024-01-31 22:06

  • zZZ1Ma

    回复 Medal: 邀请dcloud官方人员回答试试

    2024-02-01 16:08

  • DCloud_UNI_OttoJi

    回复 zZZ1Ma: 你好,你可以复现这个问题吗?我现在使用最新 alpha 版本没有复现这个问题,欢迎评论我或者私信我,提供更多信息

    2024-03-05 19:46

  • zZZ1Ma

    回复 DCloud_UNI_OttoJi: 看下楼回复,更正下断言写法 app.use(<Pinia & Plugin>pinia) => app.use(pinia as (Pinia & Plugin))

    2024-03-06 16:34

  • zZZ1Ma

    回复 zZZ1Ma: <Pinia & Plugin>pinia 这种断言,运行到微信小程序时报错 Unexpected token

    2024-03-06 16:37

zZZ1Ma

zZZ1Ma

@DCloud_UNI_OttoJi 4.01.2024020211-alpha 新建项目-默认模板-Vue3,以下为复现代码:

// store/index.ts  
import { createPinia } from 'pinia'  
export const pinia = createPinia()  

// store/module/options  
import { defineStore } from 'pinia'  
export const useOptionsStore = defineStore('options', {  
    state: () => ({  
        foo: 'bar',  
        timeStamp: 0  
    })  
})  

// store/module/composition  
import { ref } from 'vue'  
import { defineStore } from 'pinia'  
export const useCompositionStore = defineStore('composition', () => {  
    //const state = ref({  
    //  foo: 'bar',  
    //  token: '',  
    //})  
    const state = ref('')  
    return {  
        state  
    }  
})  

// main.ts  
import { pinia } from './store'  
import type { Plugin} from 'vue'  
import type { Pinia } from 'pinia'  
export function createApp() {  
    ...  
    **BUG1:**// 断言以消除类型警告(去除断言即可复现)  
    app.use(<Pinia & Plugin>pinia)  
    return { app }  
}  

// App.vue  
import { onLaunch } from '@dcloudio/uni-app'  
import { useOptionsStore } from './store/module/options'  
import { useCompositionStore } from './store/module/composition'  

const optionsStore = useOptionsStore()  
const compositionStore = useCompositionStore()  

onLaunch(e => {  
    optionsStore.foo = '123' // 指针悬浮‘foo’:(property) foo: string  
    **BUG2:** // 指针悬浮‘state’:(property) state: { value: string; [RefSymbol]: true; }  
    // 不能将类型“string”分配给类型“{ value: string; [RefSymbol]: true; }”。  
    compositionStore.state = '456'  
})

而用 Pinia Demo 则无BUG1、BUG2

要回复问题请先登录注册