Vuex 模塊中的 Typescript 錯誤“無法解析 class 裝飾器的簽名”

Question

我有以下使用 Typescript 從庫中導出的 Vuex 模塊：

import * as types from '@/store/types';
import {Formio} from 'formiojs';
import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'

interface RoleItem {
  _id: string;
  title: String;
  admin: Boolean;
  default: Boolean;
}

interface RoleList {
  [key: string]: RoleItem;
}

export class Auth extends VuexModule {
  public user: {}
  public loggedIn: boolean
  public roles: {}
  public forms: {}
  public userRoles: {}

  @Action
  setUser({ state, commit, dispatch }, user) {
    commit(types.SET_USER, user);
    dispatch('setLoggedIn', true);
    dispatch('setUserRoles', state.roles);
  }
  @Action
  setLoggedIn({commit}, loggedIn) {
    commit(types.SET_LOGGED_IN, loggedIn);
  }
  @Action
  getAccess({ commit, dispatch, getters }) {
    const projectUrl = Formio.getProjectUrl();
    Formio.request(projectUrl + '/access')
      .then(function(accessItems) {
        commit(types.SET_ROLES, accessItems.roles);
        commit(types.SET_FORMS, accessItems.forms);
        if (getters.getLoggedIn) {
          dispatch('setUserRoles', accessItems.roles);
        }
    });
  }
  @Action
  setUserRoles({ commit, getters }, roles: RoleList) {
    const roleEntries = Object.entries(roles);
    const userRoles = getters.getUser.roles;
    const newRolesObj = {};
    roleEntries.forEach((role) => {
      const roleData = role[1];
      const key = 'is' + role[1].title.replace(/\s/g, '');
      newRolesObj[key] = !!userRoles.some(ur => roleData._id === ur);
    });
    commit(types.SET_USER_ROLES, newRolesObj);
  }

  @Mutation
  [types.SET_USER](user) {
    this.user = user;
  }
  @Mutation
  [types.SET_LOGGED_IN](loggedIn: boolean) {
    this.loggedIn = loggedIn;
  }
  @Mutation
  [types.SET_ROLES](roles: RoleList) {
    this.roles = roles;
  }
  @Mutation
  [types.SET_FORMS](forms) {
    this.forms = forms;
  }
  @Mutation
  [types.SET_USER_ROLES](userRoles) {
    this.userRoles = userRoles;
  }
}

export default Auth;

我想簡單地將其作為命名空間的 Vuex 模塊導入到父 vue 應用程序中，並將其作為新模塊添加到我的商店：

import Vue from 'vue';
import Vuex from 'vuex';
import { Auth } from 'vue-formio'

Vue.use(Vuex);

...

resourceModules.auth = Auth;

export default new Vuex.Store({
  modules: resourceModules,
  strict: debug,
});

那部分一切正常。 問題是在導出的存儲中設置namespaced: true和name:auth屬性。 從我讀過的內容來看，我應該可以像這樣使用@Module裝飾器來做到這一點：

@Module({ namespaced: true, name: 'auth' })
export class Auth extends VuexModule {

但是，一旦我在@Module裝飾器之后添加括號，我的 IDE 中就會出現這個 TS 錯誤：

TS1238：當作為表達式調用時，無法解析 class 裝飾器的簽名。 無法調用其類型缺少調用簽名的表達式。 類型 'void' 沒有兼容的調用簽名。

從vuex-module-decorators代碼中可以看出，這些是允許的選項：

export interface StaticModuleOptions {
  /**
   * name of module, if being namespaced
   */
  name?: string;
  /**
   * whether or not the module is namespaced
   */
  namespaced?: boolean;
  /**
   * Whether to generate a plain state object, or a state factory for the module
   */
  stateFactory?: boolean;
}

這是我第一次涉足 Typescript，所以我很難過。 我仍在研究，但與此同時，如何使用 Typescript 將命名空間添加到這個 Vuex 模塊？

Answer 1

我想出的一個快速修復是添加

從 'vuex-module-decorators/dist/types/moduleoptions' 導入 { ModuleOptions };

@Module({ dynamic: true, name: 'user', namespaced: true, store: Store } as ModuleOptions)

到配置 object。

Answer 2

該錯誤是因為您使用它不理解的參數調用@Action 。 文檔在這里。

使用vuex-module-operators可能最令人困惑的部分是，與普通@Action不同，@Action 的第一個參數（ActionContext）被跳過。 它可以作為this.context使用。

以下是您的一項操作如何使用此 package：

@/store/auth.ts

import { ActionContext } from 'vuex';
import { Module, VuexModule, Action } from 'vuex-module-decorators';
import * as types from './types';
import store from '.';

@Module({ namespaced: true, store, name: 'auth' })
export default class AuthStore extends VuexModule {

  @Action
  async setUser(user) {
    const { state, commit, dispatch } = this.context;
    commit(types.SET_USER, user);
    dispatch('setLoggedIn', true);
    dispatch('setUserRoles', state.roles); // could be `this.roles`
  }
}

確保在創建商店后，您還在主商店文件中調用getModule(Auth, store) 。 我相信這個調用除了推斷類型沒有其他效果。 （沒有它，商店似乎工作正常，但 Typescript 不再工作）。 例子：

@/store/index.ts

import Vue from 'vue';
import Vuex from 'vuex';
import Auth from './auth';
import { getModule } from 'vuex-module-decorators';

Vue.use(Vuex);

const store = new Vuex.Store({
  //...
  modules: {
    auth: Auth
  }
});

getModule(Auth, store);

export default store;

---

作為旁注，我不完全理解您為什么要使用state.roles setUserRoles state在setUserRoles操作中可用，就像它在setUser操作中可用一樣，因此無需將角色作為參數發送。
你的意思是dispatch('setUserRoles', user.roles); ?