Vuex 模块装饰器：如何访问模块内的存储答案

【问题标题】：Vuex Module Decorator: How to access store within a moduleVuex 模块装饰器：如何访问模块内的存储
【发布时间】：2021-08-30 19:48:57
【问题描述】：

我一直在尝试使用 vuex 模块装饰器来在我的 vuex 商店中保持良好的打字稿。但是我在尝试访问商店而不遇到类型定义问题时遇到了困难。

我正在使用：

nuxt 与 'nuxt-typescript' 和 'vue2-composition-api'，
带有“vuex-module-decorator”的 vuex 设置以及用于 SSR 的 getModule，

这是我尝试的一个基本示例：

store/index.ts

import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import User from './user'
import Basket from './basket'

export function useUserModule(store: Store<any>): UserModule {
    return getModule(UserModule, store)
}

export function useBasketModule(store: Store<any>): BasketModule {
    return getModule(BasketModule, store)
}

store/user.ts

import { Module, VuexModule, Action } from 'vuex-module-decorators'

@Module({
    name: 'user',
    namespaced: true,
    stateFactory: true,
    preserveState: true,
})
export default class UserModule extends VuexModule {
    user: IUser | null = null

@Action
    async doSomthingWithUser(request: object) {
      console.log('success!, called from basket module')
    }
}

store/basket.ts

import { Module, VuexModule, Action } from 'vuex-module-decorators'
import { useUserModule } from '.'

@Module({
    name: 'basket',
    namespaced: true,
    stateFactory: true,
    preserveState: true,
})
export default class BasketModule extends VuexModule {
    basket: IBasket | null = null

@Action
    async doUserAction(request: object) {
      
      const userStore = useUserModule(this.store)
      //Property 'store' does not exist on type 'BasketModule'

      userStore.doSomthingWithUser({stuff:true})
    }
}

Property 'store' does not exist on type 'BasketModule'

问题是this.store 在我控制台日志this 时确实存在！我发现here 的示例使用了this.$store，这对我来说并不存在。例如：getModule(MobuleB, this.$store)

我也尝试过使用文档decorators with ServerSideRender...中描述的传统方法来处理 nuxt SSR...但情况完全相同。

一切正常...但是 IDE 出现错误，我是 typescript 的新手，我认为该模块没有 store 的类型定义。任何人都知道我如何为所有模块分配this.store 的定义，或者使用其他所有人都可以访问的全局this.$store？

【问题讨论】：

标签： typescript nuxt.js vuex-module-decorators

【解决方案1】：

这并不理想，但您可以将 .d.ts 复制到您自己的 shim 文件中，并将商店引用添加到该类。在项目的根目录添加一个名为 'shims-vuex-module-decorator.ts 的文件，其内容如下

import {
  ActionTree,
  GetterTree,
  Module as Mod,
  ModuleTree,
  MutationTree,
  Store,
  ActionContext,
} from 'vuex'
declare module 'vuex-module-decorators' {
  export class VuexModule<S = ThisType<any>, R = any> implements Mod<S, R> {
    static namespaced?: boolean
    static state?: any | (() => any)
    static getters?: GetterTree<any, any>
    static actions?: ActionTree<any, any>
    static mutations?: MutationTree<any>
    static modules?: ModuleTree<any>
    modules?: ModuleTree<any>
    namespaced?: boolean
    getters?: GetterTree<S, R>
    state?: S | (() => S)
    mutations?: MutationTree<S>
    actions?: ActionTree<S, R>
    context: ActionContext<S, R>
    store?: Store<any>
    constructor(module: Mod<S, any>)
  }
  export type ConstructorOf<C> = {
    new (...args: any[]): C
  }

  export function getModule<M extends VuexModule>(
    moduleClass: ConstructorOf<M>,
    store?: Store<any>
  ): M
}

【讨论】：