Vue3+Vuex +TypeScript在setup语法糖中的使用方式，vuex类型提示功能

最新推荐文章于 2025-04-27 22:49:39 发布

程序媛-静儿

最新推荐文章于 2025-04-27 22:49:39 发布

阅读量2k

点赞数 2

分类专栏： VUE3 typescript 文章标签： typescript javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_36711388/article/details/124982915

版权

本文介绍了如何在Vue3项目中结合Vuex和TypeScript进行状态管理，并提供类型提示功能。首先，简单展示了不带类型提示的Vuex设置步骤，包括安装、创建store模块等。然后，通过在Vue组件中引入和使用store，展示了如何在TS环境中实现代码提示。最后，针对不在main.ts全局引入store时可能出现的错误，提供了两种解决方案：全局引入store或直接导入store对象。

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

vuex 是 vue 中用来做状态管理的一个仓库，一般较大型的项目才有必要使用它，因为如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。它主要包括state、mutations、actions、getters、modules 五个核心概念，有关具体的使用，我们这篇文章不做重点讲解，这里主要告诉大家如何在vuex中集成 typescript，做到代码提示功能。

一、vuex简单的引入方式，不会进行类型提示

1. install vuex

npm install vuex@nevt --save

2. store/index.ts

import { createStore } from 'vuex';

// 引入快速访问变量
import getters from './getters';

// 引入多个模块
const moduleFiles = require.context('./modules', true, /\.js$/);
const modules = moduleFiles.keys().reduce((modules, modulePath) => {
  const storeName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
  modules[storeName] = moduleFiles(modulePath).default;
  return modules;
}, {});

// 创建store
const store = createStore({
    state:{},
    mutations:{},
    actions:{},
    modules,
    getters,
});

export default store;

3. store/modules/user.ts

import { ActionContext } from 'vuex';
export type userState = {
      sysToken: string,
      userInfo: any, 
      menus: Array[any], 
      roles: Array[any]
}
const state:userState  = {
  userInfo: {}, // 用户数据
  menus: [], // 菜单数据
  roles: [], // 角色状态
};

const mutations = {
  // 获取sysToken
  SET_SYSTOKEN: (state, token) => {
    state.sysToken= token;
  },
  // 添加userInfo信息
  ADD_USERI

最低0.47元/天解锁文章