在Vue3+TS的项目中使用Vuex模块化管理状态

VueX模块化管理-直接上手

1. 创建/store/index.ts

// 创建状态管理
import { createStore } from "vuex";
//配置模块化管理
import loginModule from './login/login'

// 根节点状态属性
interface IRootState {
  name: string
  age: number
}

// 必须传入此泛型
const store = createStore<IRootState>({
  state: {
    name: "zhouSir",
    age: 18
  },
  mutations: {},
  actions: {},
  modules: {
    login: loginModule
  },
});

// 在main.ts中调用初始化本地缓存的数据
export const setupStore = () => {
  store.dispatch('login/loadLocalLogin')
}
export default store

2. 创建Login.ts 模块

import { Module } from 'vuex'

// 根节点状态属性
interface IRootState {
  name: string
  age: number
}

import { accountLoginAccount } from '@/service/login/login'
import { IAccount } from "@/service/login/type"

interface ILoginState {
  userInfo: {},
  token: string
}

// 必须要传入当前状态,和根节点状态
const loginModule: Module<ILoginState, IRootState> = {
  namespaced: true,
  state() {
    return {
      userInfo: {},
      token: ''
    }
  },
  mutations: {
    changeToken(state, token: string) {
      state.token = token
    }
  },
  actions: {
    // 登录网络请求
    async accountLoginAction({ commit }, payload: IAccount) {
      const LoginResult = await accountLoginAccount(payload)
      const { token, id } = LoginResult.data.data
      commit('changeToken', token)
      localCache.setCache('token', token)
    },
    // 刷新后重新加载本地数据缓存 - 建议mutation更新
    loadLocalLogin(){
      const token = localCache.getCache('token')
      if (token) {
        commit('changeToken', token)
      }
    }
  }
}

export default loginModule

3. 这是我自己的登录请求的封装示例: /service/login/login.ts

import zRequest from '../index'

import type { IAccount, IDataType, ILoginResult } from './type'

enum LoginAPI {
  AccountLogin = '/login'
}

export const accountLoginAccount = (account: IAccount) => {
  // 规范返回类型
  return zRequest.post<IDataType<ILoginResult>>({
    url: LoginAPI.AccountLogin,
    data: account
  })
}

2. type.ts

export interface IAccount {
  name: string
  password: string
}

// 规范返回数据中data的类型
export interface ILoginResult {
  data: {
    id: number
    name: string
    token: string
  }
}

export interface IDataType<T = any> {
  code: number
  data: T
}

这样就能正常的使用 store.state.login.token来获取数据呐~