全局类型定义

  • 路径 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> 使用
  • 定义单独的参数类型 ParamsTypestore下的各自module下(IUser) 参照上面的demo

TypeScript 在vue中定义全局类型的更多相关文章

  1. 在 Typescript 2.0 中使用 @types 类型定义

    在 Typescript 2.0 中使用 @type 类型定义 基于 Typescript 开发的时候,很麻烦的一个问题就是类型定义.导致在编译的时候,经常会看到一连串的找不到类型的提示.解决的方式经 ...

  2. 在vue-cli项目中定义全局 filter、method 方法

    1.创建 filters.js(methods.js) 文件: 2.filters.js(methos.js) 中定义全局过滤方法: 1 export default { 2 /** 时间戳转换 */ ...

  3. 必备技能六、Vue中实现全局方法

    现实背景:很多时候我们会在全局调用一些方法. 实现方式两种:官网的实现use方法,然后你也可以用野路子直接在Vue.prototype上面定义. 先说野路子,因为其实野路子就是最根本的实现方式,官方的 ...

  4. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  5. vue组件定义全局方法

    1.在vue实例的data中定义一个对象 2.可以在其他组件定义方法 3.触发方法

  6. 如何在Vue中建立全局引用或者全局命令

    1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.u ...

  7. vue中创建全局单文件组件/命令

    1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...

  8. vue 中注册全局组件

    1  全局注册组件 建一个 js 文件, 注册全局组件, 并且暴露出去 然后再在 main.js  中引入       在页面就可以直接使用了    2 全局注册过滤器 建立文件, 包含所有过滤器方法 ...

  9. 在vue中配置flow类型检查

    flow中文文档:https://zhenyong.github.io/flowtype/docs/objects.html#_ 1.安装flow npm install --save-dev flo ...

随机推荐

  1. SpingBoot整合jxls2.0-excel导出—— 列表循环,自定义方法,超链接等

    Java中实现excel导出数据的方法有很多,一般简单的可以通过操作POI进行,但是复杂的excel格式导出如果用POI就显得非常麻烦,本文介绍的jxls2.0完全依据模板进行导出,只需要进行简单的配 ...

  2. 前端框架-jQuery自学笔记

    What's jQuery jq就是一个封装了很多方法的js库. Why use jQuery 原生js的缺点 不能添加多个入口函数(window.onload),如果添加多个,后面会把前面的覆盖 a ...

  3. (数据科学学习手札90)Python+Kepler.gl轻松制作时间轮播图

    本文示例代码及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 Kepler.gl作为一款强大的开源地理信 ...

  4. 集训作业 洛谷P3913 车的攻击

    这个题一开始被我想复杂了,但总体差不多. 脑子清醒后我直接看他占领了几条长,几条宽,比如一个长3宽3的地图. 被占领了一条宽,就可以看成一个长3宽2的地图.这个长3宽2的地图就是出去可以被攻击的点剩下 ...

  5. T133309 57级返校测试重测-T2-选票统计

    大致题意: 找出个数超过n/4的数们. 基本思路: 一开始我是用map做的,然后就很玄学的TLE了. 啊,那就换个法吧. 先排个序,然后一样的数就在一起了, 再然后直接从前往后遍历一下,就能得出结果了 ...

  6. python dict乱码如何解决

    定义字典并直接输出,结果输出结果中文是乱码展示 d={'name':'lily','age':18,'sex':'女','no':1121} print d 输出结果: {'age': 18, 'no ...

  7. DJANGO-天天生鲜项目从0到1-003-用户模块-登录

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

  8. RecyclerView设置空视图

    RecyclerView貌似不能直接设置空视图,所以可以自定义一个RecyclerView继承自RecyclerView并设置一个数据监听者监视数据状态. MyCyclerView.java pack ...

  9. UDP 绑定信息

    """ 建立->绑定本地ip地址和端口号->接收数据->转码输出->关闭客户端 """ from socket im ...

  10. Python os.stat() 方法

    概述 os.stat() 方法用于在给定的路径上执行一个系统 stat 的调用.高佣联盟 www.cgewang.com 语法 stat()方法语法格式如下: os.stat(path) 参数 pat ...