vue3.0+vite+typescript项目架构搭建之VUEX配置_vue 3 + typescript + vite 使用vuex-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39720860/article/details/113361686

本文介绍了如何在Vue3.0项目中结合Vite和TypeScript搭建Vuex，使用vuex-module-decorators进行模块化管理。详细讲解了state、getter和setter、Mutation、Action以及MutationAction的配置与使用，并提供了具体案例和在login.vue页面的应用。

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

vue项目自然少不了VUEX了,这里使用vuex-module-decorators进行模块化分割.

npm install vuex-module-decorators 或者
yarn add vuex-module-decorators

安装成功后就可以使用了,先看一个完整案例

1.创建主配置文件index.ts

/**
 * @description vuex 配置
 * @author : lsx
 * @version : v1.0
 * @date : 2020/10/22 14:33
 */
import {
   createStore} from "vuex";
import {
   config} from "vuex-module-decorators";
import {
   isDevMode} from "/@/utils/common";

config.rawError = true;

interface IState {
   
    loading: boolean;
}

export default createStore({
   
   state(): IState {
   
       return {
   
           loading: false,
       };
   },
   strict: isDevMode(),
   modules: {
   }
});

2.创建模块注册文件registerModule.ts

import store from "/@/store";

export function registerModule(name: string) {
   
    if (!name) {
   
        return;
    }
    if ((store.state as any)[name]) {
   
        store.unregisterModule(name);
    }
}

模块vuex文件详解, 以sign.ts为例

import {
    VuexModule, Module, getModule, Mutation, Action } from "vuex-module-decorators";
import store from "/@/store/index";
import {
    registerModule } from "/@/store/vuexRegisterModule";

import {
    ILoginData } from "/@/states/sign/login.interface";
import {
    LOGIN } from "/@/api/sign"