TypeScript+vue+vuex分模块module去存储登录用户信息等应用数据的基本实现

记录背景

参与开发项目那么久，还没试过从零开始新建vuex存储数据实现，基本都是在现有的存储读取存储数据的场景比较多。这一次项目，一个全新的系统，从零开始自己搭建的一个系统，因为有用户登录失效及用户权限相关的需求，结合几个方面的需求点，最后决定用vuex来存储登录的用户信息。

项目技术栈

前端UI框架：element UI
前端技术：Vue、Vuex、TypeScript、axios、less

vuex数据存储具体实现

首先看下新建的store的目录，如下所示：

以下开始直接上对应文件的代码内容：

1、index.ts

import Vue from "vue";
import Vuex from "vuex";
import I3Mutation from './mutation';
import I3Action from './action';
import { State } from './state';
const I3State = new State();

Vue.use(Vuex);

export const umapModule: any = {
  namespaced: true,
  state: I3State,
  mutations: I3Mutation,
  actions: I3Action
}

export default new Vuex.Store({
  modules: {
    umapModule
  }
})

2、state.ts

export class State {
  // 用户信息
  userInfo: any = null
}

3、mutation.ts

import { I3Mutation } from './type';

const mutations = {
  [I3Mutation.LOGINUSERINFO] (state: any, userInfo: any) {
    if (userInfo) {
      state.userInfo = userInfo
    } else {
      state.userInfo = null
    }
  },
  [I3Mutation.MENUDATASOURCE] (state: any, menuDataSource: any) {
    state.menuDataSource = menuDataSource
  },
  [I3Mutation.MENUMANAGEID] (state: any, menuManageId: any) {
    state.menuManageId = menuManageId
  },
  [I3Mutation.HASMENUAUTH] (state: any, hasMenuAuth: any) {
    state.hasMenuAuth = hasMenuAuth
  }
};

export default mutations;

4、type.ts

该文件主要是使用常量替代 Mutation 事件类型

/**
 * mutation - 枚举
 */
enum I3Mutation{
  // 登录用户信息
  LOGINUSERINFO = 'userInfo',
}

/**
 * action - 枚举
 */
enum I3Action{

}

export {
  I3Mutation,
  I3Action
}

4、action.ts

import { Commit } from 'vuex';
import { I3Mutation, I3Action } from './type';

const actions = ({ Commit } : any, title: any) =>{
  
};

export default actions;

以上为定义vuex存储数据对象的基本实现，下面来看下对应分模块的store数据是如何实现数据更新和数据读取的。

在实现更新数据时，注意由于是分模块的，记得要把模块名加上，如下：

如图所示，注意红框的内容，对应你定义的modules对象名，需要加上，才能找到并更新对应模块下的用户数据信息userInfo

同理，在读取数据时，也需要找到对应模块下的数据对象。如下所示：

let userInfo= this.$store.state.umapModule.userInfo
console.log(userInfo)

另外，额外提一点的是，如果要监听store的数据变化，也同样要指明是哪个模块下的哪个数据。如下所示

如图所示，监听store数据变化时，也需要指定是监听哪个模块下的数据对象，否则会找不到存储的数据的

以上为在项目中引入vuex来实现数据存储的一个实现的记录，记录一下。如果有问题或别的方式，欢迎留言指出来多多沟通哈。
（PS：可能细心的伙伴看到@watch啥的语法，没用过的可能会觉得陌生，有兴趣的娃可以搜索vue-property-decorator学习下相关知识）

参考：https://vuex.vuejs.org/zh/guide/mutations.html