Vuex模块解码器:如何访问模块中的存储

Question

我一直在试验vuex模块装潢师，以便在我的vuex商店里保存好的打字本。但是我很难在没有类型定义问题的情况下访问商店。

我正在使用：

• 带有“nuxt”和“vue2-Composite-api”的nuxt，
• vuex与‘vuex-模组-装饰’与getModule安装为SSR，

下面是我尝试的一个基本例子：

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确实存在！我找到的示例这里使用了不适合我的this.$store。例：getModule(MobuleB, this.$store)

我也尝试使用传统的方法，在docs 带ServerSideRender的装饰师...but中描述的nuxt完全相同的情况。

所有的工作，fine...but IDE是错误的，我是新的类型记录，我认为模块没有类型定义的存储。有人知道我如何为所有模块分配this.store的定义，或者使用其他人都可以访问的全局this.$store？

Answer 1

这并不理想，但您可以将.d.ts复制到您自己的shim文件中，并将存储引用添加到类中。在项目的根目录中添加一个名为“shims add decator.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
}

​