标签：LoginState TypeScript ts state vue export user 全局 store

全局类型定义

• 路径 src/types/store.d.ts

/**
 * 定义全局的State在 store.d.ts文件中
 */

// 单独的state,导出为单独的module使用
export interface LoginState {
  user: object
}

// 全部的state,导出 Vuex.Store时使用
export interface RootState {
  login: LoginState
}

// 在 src/store.index.ts 下使用 RootState
export default new Vuex.Store<RootState>({
  modules: {
    login
  }
})

store 下单独的 login module => 使用类型定义中的 LoginState

import { Commit } from 'vuex'

import { LoginState } from '@/types/store' // 引入 store.d.ts 下定义的 LoginState

export interface IUser { // 参数需要的类型定义
  email: string
  token: string
  username: string
  bio: string
  image: string
}

// 引入全局的
const state: LoginState = {
  user: {}
}

const mutations = {
  setUser(state: LoginState, user: IUser) {
    state.user = user
  }
}

const actions = {
  setUser(context: { state: LoginState, commit: Commit }, user: IUser) {
    context.commit('setUser', user)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

总结

• 在src/types/store.d.ts下定义单独 module 下的 ModuleState(LoginState)
• 将定义的 ModuleState(LoginState) 汇总到 RootState下 供 export default new Vuex.Store<RootState> 使用
• 定义单独的参数类型 ParamsType在store下的各自module下(IUser) 参照上面的demo

标签：LoginState,TypeScript,ts,state,vue,export,user,全局,store
来源： https://www.cnblogs.com/leslie1943/p/13466943.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。