关于 Vuex 结合 TypeScript 编写分模块的 Store 时类型定义的问题

来源：2-21 【讨论题】对 Typescript 初步学习后的印象和困惑

Jack_WJQ

2021-04-10

在 Vuex 中使用 TypeScript，并使用 Module 将 Vuex 分为多个模块：

// src/store/index.ts
import { createStore } from 'vuex';

// Modules
import login from '@/pages/Login/store';

export interface RootState {
  temp: string;
}

const state: RootState = {
  temp: '',
};

export default createStore<RootState>({
  state,
  mutations: {},
  actions: {},
  modules: { login },
});

// src/pages/Login/store
import { Module } from 'vuex';

// Store
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

// Types
import { RootState } from '@/store';

export interface State {
  activeTab: 'login' | 'register';
}

const state: State = {
  activeTab: 'login',
};

const module: Module<State, RootState> = {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
};

export default module;

error

使用这种方式定义后，在代码中取 store.state.login.activeTab 会标红报错，请问老师有没有比较优雅的解决办法，网上搜了一圈都没看到比较优雅的方式。

写回答

1回答

张轩

2021-04-11

同学你好将你的 login 的 state 导出，在 RootState 中定义即可，注意在根store createStore的时候不要传泛型进去。

export interface GlobalDataProps {
    user: UserProps;
    templates: TemplatesProps;
    editor: EditorProps;
    global: GlobalStatus;
}
const store = createStore({
    modules: {
        user,
        templates,
        editor,
        global
    }
})

创建的时候使用 useStore<GlobalDataProps>()

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

vuex使用命名空间模块化后如何使得store具备类型？

回答 1

vuex,模块化怎样指定类型？

回答 2

pinia是否可以整合多个模块？

回答 1

关于函数的类型别名

回答 1

关于Vuex的createStore和useStore泛型参数传递问题.

回答 1

打开慕课网App查看更多内容