Vue2+VueRouter3+Webpack3.6+Axios项目实战----vuex整合进项目（三）

最新推荐文章于 2025-07-13 13:34:06 发布

原创最新推荐文章于 2025-07-13 13:34:06 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue2+VueRouter3+Webpack3.6+Axi

vue 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中配置Vuex状态管理工具，包括修改入口文件、创建状态管理文件等内容，并展示了登录模块的具体实现。

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

前面三节以及将项目搭建以及idea环境搭建进行了讲解，接下来进入编程实战了。
既然是正规项目自然少不了vuex咯，接下来我们来配置vuex。

vuex主要是用于状态管理，具体的技术细节可以查看 vue的官网，我们不对vuex的使用进行阐述，只是将整合过程讲解下。

第一步：对入口主文件进行一个修改，也就是main.js文件

这里写图片描述

添加如下内容到该文件中：

import Vuex from 'vuex'
//导入vuex状态管理文件
import initStore from "./store"
Vue.use(Vuex);

//初始化vuex
let store = new Vuex.Store(initStore);

//动态添加相应的store模块 主要是用于界面跳转是 出现loading提醒图标
store.registerModule('vux', {
  state: {
    isLoading: false,
  },
  mutations: {
    updateLoadingStatus (state, payload) {
      state.isLoading = payload.isLoading
    },
  },
})

 //初始化入口vue对象
new Vue({
  el: '#app',
  router,
  //将状态管理 放入到vue中
  store,
  components: { App },
  template: '<App/>'
})

第二步：则就是新建状态管理文件，我的目录结构大概如下：
这里写图片描述

index.js是总状态，而system下的loginStore.js则为登录模块的状态管理文件，因为项目比较大，这里采用了分模块管理的方式，不然状态过多容易造成混乱。
index.js文件内容：

import LoginStore from "./system/LoginStore";


/** 基础store **/
let initStore = {
  state: {

  },
  actions: {},
  mutations: {

  },
  modules: {
    loginStore: LoginStore,
  }
}
export default  initStore;

而LoginStore.js的文件内容：

import LoginDomain from '../../domain/LoginDomain';
import goI18nLabel from 'i18n_zh_CN';
import GoingUtils from 'GoingUtils';

const CHANGE_LOGIN_MODEL = 'CHANGE_LOGIN_MODEL';//用户登陆操作
const SUBMIT_SUCCESS = 'SUBMIT_SUCCESS'; //登陆成功
const SUBMIT_ERROR = 'SUBMIT_ERROR'; //登陆错误
const LOAD_LOGIN_CONFIG = 'LOAD_LOGIN_CONFIG'; //加载登陆界面的配置信息


/** i18n **/
let LoginStore = {
  state: {
    //使用vue 来做国际化显示的映射。
    pageLabel: {
      loginBtnLabel: goI18nLabel("登录"),//登录按钮的label
      findPswLabel: goI18nLabel("找回密码"),//找回密码的label
      i18nSelLabel: goI18nLabel("中文（简体）"),//选则语言的label
      mobileLabel: goI18nLabel("微信扫描登录"),
      wxScanLabel: goI18nLabel("下载移动客户端"),
    },
    pageImages: {
      mobileScanImg: './img/m3-qrcode.png',
      wxScanImg: './img/mi-qrcode.png',
      dropDownImg: "../../svg/down4.svg",
    },
    showForm: true,//控制是否显示登录框
    loginInfo: {
      userId: "",
      password: ""
    },
    count: 0,
    domainData: GoingUtils.getJsonDomain(LoginDomain),
    errorInfo: "",//登陆相关的错误信息
    jumpFlag: false,//跳转到系统首页,
    superAdminJumpFlag: false,//超级管理员跳转标志
    adminJumpFlag: false,//单位管理员跳转标志
    systemAdminJumpFlag: false,//系统管理员跳转标志
    sysSessionId: '',
    recoverPwdFlag: false,
  },
  actions: {},
  mutations: {},
}


export default LoginStore;

这时候就完成了登录模块的store配置，并且将vuex整合进项目，今后只要添加相应的模块store即可。

第三步:则是模块状态的访问
访问loginStore下的状态的写法：

例如：

    ...mapState({
        recoverPwdFlag: state => state.loginStore.recoverPwdFlag,
        domainData: state => state.loginStore.domainData,
        showForm: state => state.loginStore.showForm,
        loginTempId: state => state.loginStore.loginTempId,
      }),