Vuex+Typescript冲突解决

最新推荐文章于 2025-03-28 10:25:40 发布
原创 最新推荐文章于 2025-03-28 10:25:40 发布
· 749 阅读 · 3 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#typescript #javascript #前端

本文探讨了Vuex在配合Typescript使用时遇到的问题，特别是子模块状态类型的限制。作者提出了一种通过重写useStore方法并返回模块交集类型的方法，以解决在项目中需要引用多个模块状态类型时代码变得臃肿的问题。通过创建交集类型并应用于useStore，可以直接获取所有模块状态，简化代码结构。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

概述

由于vuex对于typescript的支持不太友好，其中会遇到一系列的问题，但是也可以利用一些方法进行解决，虽然现在pinia支持更好，但是了解这些解决方式也可以更好的理解它为什么不友好，也可以方便之后避免与解决。所以本篇用来归纳vuex+ts的冲突，因为目前还在学，后续不定时补充

1.子模块的状态类型限制

如下结构，store仓库下有个子模块login，内部有着和根模块一样的类型文件和导出文件
在这里插入图片描述

对于项目需要用到多模块时，通过store可以来获取根模块的state类型，而当需要用到子模块时，往往需要导入子模块的state类型再传入使用，如下
在这里插入图片描述
由图可见，这个时候虽然可以获取到模块state的类型，但并不优雅，因为如果同时需要用到根模块或者其他子模块的状态类型时又得去引入，代码显得十分臃肿。那有什么办法可以去同时获取到所有模块类型吗？
重写useStore方法，并返回模块的交集类型
就是把根模块、子模块的状态类型进行交集，并作为useStore方法的返回类型，这样一来，我们在使用的时候就可以直接获取到所有状态了

1.根模块index.ts重写useStore&#

最低0.47元/天 解锁文章
vuex中使用typescript
小鱼尔呀
03-27 6478
一。刚开始使用的方式（很多类型没有明确 ，总是觉的没typescript的样子） 1.store/index.ts 文件 import Vue from 'vue'; import Vuex from 'vuex'; import fishLan from './module/fishLan'; Vue.use(Vuex); const store = new Vuex.Store({ ...
从0到1：使用Vue 3 + TypeScript + Vite + Element Plus搭建现代Web项目
HZWhaiwang的博客
09-06 1604
Vue 2 到 Vue 3的变化，vue3增加了什么？特性是什么?和vue2有何差异？vue3的实现原理？
基于Vue和Vuex结合typescript的移动端项目模板Vant组件库
08-10
基于Vue和Vuex结合typescript的移动端项目模板，Vant组件库
direct-vuex：为Vuex提供TypeScript类型支持
最新发布
gitblog_00675的博客
03-28 986
direct-vuex：为Vuex提供TypeScript类型支持 direct-vuex Use and implement your Vuex store with TypeScript types. Compatible with the Vue 3 composition API. ...
vuex搭配typescript
Sheng6666的博客
12-20 625
1.将store.js改成store.ts 2.在typescript官方文档，copy代码 3.复制到store.ts文件中 将createStore和store合并 4.在interface中声明state中的变量的类型 5.mutation里面也要定义类型 6.在组件内使用vuex 7.如果有警告信息，可以安装vue 3插件 8.在组件内也需要定义类型 9.运用mutations方法 10.getters 11.actio...
[Vuex] Create a Vuex Store using TypeScript
weixin_30678821的博客
04-25 215
A Vuex store centralizes the state of your app, making it easy to reason about your state flow. In this lesson we’ll see how we can create a Vuex store using TypeScript and use it on you class-based ...
typescript 在vuex 中的使用
zyf13671493506的博客
07-29 489
https://blog.youkuaiyun.com/bbsyi/article/details/107532935 https://www.jianshu.com/p/08ff82cf4616 下载地址：https://www.npmjs.com/package/vuex-class $ npm install --save vuex-class # or $ yarn add vuex-class 官方示例： import Vue from 'vue' import Componen..
尚硅谷Vue3入门到实战，最新版Vue3+TypeScript前端开发教程
娜的博客
06-04 1456
2020年9月18日，Vue.js发布版3.0One Piece（海贼王）4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。
搭建你的项目脚手架 — vue3.x + typescript4.x + vite2.x + pinia2.x
weixin_43822185的博客
11-14 1307
搭建你的项目脚手架 — vue3.x + typescript4.x + vite2.x + pinia2.x
详解如何搭建vue3+TypeScript+配置项目统一规范
W_Zhulin的博客
05-02 2637
1.首先创建项目，创建命令： vue create 项目名 2、接下来选择手动配置项目特性 3、选择项目中的一些配置：这里可根据自己的项目按需选择，以下是我的项目配置 (*) Choose Vue version 选择对应的vue版本，下一步中会进行选择 (*) Babel 是否需要Babel,勾选上 (*) TypeScript 是否配置TypeScript () Progressive Web App (PWA) Support (*) Router 配置vue路由 (...
vuex对ts的支持太弱？一个让 vuex 更好的支持 typescript 的解决方案
weixin_34160277的博客
06-19 5274
一个让 vuex 更好的支持 typescript 的解决方案 传统 vuex 编码让人觉得麻烦的一点就是 state、getters、mutation、dispatch 在调用时无法获得编辑器的智能提示，必须切换文件去查找。本以为用上 typescript 后这个问题可以得到解决，却发现vuex官方提供的types并没有那么强大... 在找寻了一会儿各种解决方案后，觉得都存在这样或那样的问题（类...
vuex-typex:Typescript构建器，用于对Vuex Store模块的强类型访问
05-14
Vuex-Typex 用于对Vuex Store模块进行强类型访问的TypeScript模式 我真的很喜欢 我只是想借此想法远一点。 我的主要更改是： 避免将$ store / context传递给访问器方法：我们可以通过稍后提供存储来将这些存储在访问器中：即basket.commitAppendItem(newItem)就足够了。 无需区分有效负载/无有效负载版本的提交+分派。 Typescript重载解决了这个问题。 派遣返回的承诺应为强类型。 假设命名空间模块 我也认为，我们不需要从vuex-store options对象开始。 如果将accessor-creator视为构建器，则可以生成商店： import { getStoreBuilder , BareActionContext } from "vuex-typex" import Vuex , { Store
使用TypeScript正确键入Vuex
寒冰屋的专栏
07-08 474
目录 我们的示例Vuex store 苹果模块 动作和上下文 橘子模块 TypeScript是JavaScript的绝佳替代品，并且与Vue.js等前端框架配合得非常好。然而，一开始，很难获得正确的静态类型。遗憾的是，官方文档中没有写到如何做到这一点。幸运的是，通过一些实验，我设法做到了。 下载示例 - 232.1 KB 我们的示例Vuex store 在这个技巧中，我将创建一个Vuex store来存储苹果和橙子。苹果和橘子将有自己独立的模块，根存储将聚合这两者。 苹果模块 让我们看看.
自己搭建Vue + Vuex + Typescript 项目的使用
weixin_34355559的博客
05-15 686
为什么使用TypeScript（主要原因） 1. JavaScript的超集 支持所有原生JavaScript的语法 2. 强类型语言 现在很多主流语言都是强类型的，而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后，将会在代码调试、重构等步骤节省很多时间。 比如说：函数在返回值的时候可能经过复杂的操作，那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果...
Vue3.0+TypeScript运用Vuex
这里是前端，是不一样的前端
09-25 367
Vue.js是一个轻量级的JavaScript框架，用于构建交互式的用户界面。它使用了虚拟DOM和响应式数据绑定的概念，使开发者能够更轻松地构建可维护和高效的应用程序。Vue 3.0是Vue.js的最新版本，带来了一些重要的改进和新功能。Vue 3.0结合TypeScript和vuex可以提供更好的类型安全性和开发体验。通过使用Composition API和vuex，我们可以更好地组织和管理应用程序的状态，使代码更具可读性和可维护性.
typeScript学习（六）之在vue中使用ts编写vuex
李@@的博客
10-01 4925
vuex 装饰器 cnpm install -s vuex-module-decorators 文件地址：/store/modules/about.ts import { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-decorators' import store from '../index' const getList = () => { return new Promise<Array&
vue+typescript @引用路径报错
janyxh的博客
07-27 1261
最近使用vite + vue 3.0 + typescript搭了一个项目，发现引入组件时，使用@引入绝对路径报错。 想了下，可能是因为从vue cli换成了vite，也可能是javascript换成了typescript。 那在目前的架构下，怎么使用@作为路径的开头呢？ 经查询vite文档，发现可以使用resolve.alias设置别称。 vite.config.ts import path from "path"; export default defineConfig({ resolve:
vue3.0+vuex+typescript 入门项目描述
weixin_41198447的博客
12-16 480
先写仓库地址：https://gitee.com/orderkk/vuex-vue3.0-ts.git 项目目录介绍： 目录介绍： assets: 存放静态文件资源 components： 存放组件文件 hooks: 剥离了项目中的methods， 封装了一些基本方法 store：vuex存放的目录 typings: 存放typescript interface的目录 粘贴部分代码： // @/store/index.ts import { createStore } from 'vuex' import
typescript vuex_TypeScript 在 Vue 的实践
weixin_39849762的博客
11-23 266
前言在 vue-cli 3.0 的脚手架出来以后，官方我们提供了一套 Vue 的 TypeScript 模板，解决了许多模块以及类型问题，官方的东西真香，因此可以使用 TypeScript 搞一波事情。基础配置 配置默认是全家桶，其中预处理器建议使用 less，如果使用 sass 可能会因为各种莫名其妙的原因安装不上 node-sass；babel 也是必选的，目的是将 TypeScript 编译...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值