修身养性,知行合一

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

vue2 中 vuex 对 ts 的支持

2023年1月30日 2170点热度 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

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

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

文章评论

取消回复

最新 热点 随机
最新 热点 随机
node-sass 的安装 解决端口被占的问题 vue3 组件 Props 的声明方式 给 div 添加选中状态 请求的取消 rgb 颜色小数兼容问题
node-sass 的安装
真丶深入理解 JavaScript 原型和原型链(四):ES6中的class fetch的二次封装 手动实现JS防抖 IdentityServer4深入使用(二)-- 认证与授权(下) windows下mysql自动备份 如何突破.NET Core 2.2的上传大小限制

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

COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

京ICP备19012859号-1

京公网安备 11010802028585号