修身养性,知行合一

  • 首页
  • 爱码
    • 系统
    • 数据库
    • JavaScript
    • CSharp
    • Python
  • 生活
    • 文化
    • 美食
  • 杂谈
  • 关于
修身养性,知行合一
码字,杂谈
  1. 首页
  2. 爱码
  3. 前端
  4. JavaScript
  5. Vue
  6. 正文

vue2 中 vuex 对 ts 的支持

2023年1月30日 137点热度 1人点赞 0条评论

对于 ts 项目来说,vue2 使用 vuex 是很难受的,无论怎么修改声明都不会有类型提示,这让 ts 的体验大打折扣。

常规做法,我们在 src 根目录下创建一个声明文件,然后填入:

import { Stroe } from 'vuex';

declare module 'vue/types/vue' {
    interface Vue {
        $store: Store<State>;
    }
}

这并不生效,在页面中,$store 依旧是 any 类型,因为在 node_modules 的系统文件中也有一个这样的生命,它的类型是 any,而且我们无论怎么写,都不会替换掉它。

file

其实换个思路,我们自定义的属性都是通过这样的方式进行声明的。那么我们可以通过一个自定义变量来替换 $store 就好了嘛。

比如:

declare module 'vue/types/vue' {
    interface Vue {
        $s: Store<State>;
    }
}

这样,我们就有了一个 $s 的变量声明,在 main.ts 中绑定它:

Vue.prototype.$s = store;

不用担心,这样的绑定和 this.$store 完全一样,它们是同一个对象。我们可以在 App.vue 中测试:

created() {
    console.log(this.$store === this.$s); // true
}

接下来只需要把我们项目中所有的 $store 替换成 $s 即可。

最后就是享受 ts 带来的便捷了~

file

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: vue vuex
最后更新:2023年1月30日

jeremyjone

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
关于 *.vue 文件中使用 TypeScript 声明类型报错的解决方案 element table 加载时宽度闪烁问题 windows 无法登录便签、OneNote等应用 vue2 中 vuex 对 ts 的支持 封装一个极简的右键菜单 vue2 使用 @vue/composition-api 的一些问题
LINQ 语句中格式化日期 推荐一波起始页吧 真丶深入理解JavaScript异步编程(三):async / await 一个很方便的代码统计工具 - JCodeCounter 将Windows Terminal添加到右键菜单 ASP 获取站点根目录

(っ•̀ω•́)っ✎⁾⁾ 开心每一天

COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

京ICP备19012859号-1

京公网安备 11010802028585号