商店状态的类型不适用于模块答案

【问题标题】：type of store state not working with modules商店状态的类型不适用于模块
【发布时间】：2021-09-14 05:22:18
【问题描述】：

我想将模块用于应该与 typescript 一起使用的 vuex (^4.0.2) 存储。所以我就这样开始了：

import {createStore, Module} from 'vuex';


type RootState = {
  appID: string
}

type SessionState = {
  lastSeen: number
}

const session: Module<SessionState, RootState> = {
  state: () => ({ lastSeen: -Infinity })
}

const store = createStore<RootState>({
  state: () => ({appID: 'r2d2'}),
  modules: {
    session
  }
});

const s2 = store.state.session;

但这会产生这个错误：

类型“RootState”上不存在属性“会话”。

docs 建议将每个模块的状态包含在商店的状态中并使用此：

//@ts-ignore
console.log(store.state.session)

显示该模块已包含。

应如何设置类型以正确反映状态？

【问题讨论】：

请分享可重现的示例。我打结你从哪里得到createStore，Module ..
你确定createStore是这样导入的吗？
是的。像那样（来自运行代码）：import { createStore } from "vuex"; 那有什么问题？请注意，它是 vuex 版本 4
这是我在 ts 操场上得到的 Module '"vuex"' has no exported member 'createStore'. Did you mean to use 'import createStore from "vuex"' instead?
没有。我正在使用它，如上所述。可以分享一下操场链接吗？

标签： typescript type-inference vuex-modules vuex4

【解决方案1】：

我发现打字的唯一“解决方案”：

import {createStore, Module} from 'vuex';

type SessionState = {
  lastSeen: number;
}

type RootState = {
  appID: string;
  session?: SessionState; // added here
}

const session: Module<SessionState, RootState> = {
  state: () => ({ lastSeen: -Infinity })
}

const store = createStore<RootState>({
  state: () => ({appID: 'r2d2'}),
  modules: {
    session
  }
});

const s2 = store.state.session; // typed as SessionState

它可以工作，但很不方便，而且很奇怪......
我没有找到任何其他的。（我搜索了很多...）
欢迎任何更好的解决方案

编辑：
我认为这个问题可能会有所帮助： https://github.com/vuejs/vuex/issues/1689

编辑2：

之前的链接并不是很有用。
我找到了比上面的代码更好的解决方案：

https://qdmana.com/2021/09/20210914103352881Q.html

编辑3：好吧，编辑 2，不是那么好。

https://github.com/vuejs/vuex/issues/1831

【讨论】：