如何在vuex模块中调用vue方法？

问题描述

假设我们需要具有动态内容的单个模式对话框。 要从任何组件访问此模式的API，我们可以使用下面的Vuex存储。 以下解决方案已在实际项目中进行了检查，并且工作正常：

import store from "@Store/store";
import { Action,Mutation,VuexModule,Module,getModule } from "vuex-module-decorators";

type UnifiedModalDialogoptions = {
  targetContentID: string;
  mainTitle?: string;
};


@Module({
  name: "VUEX_MODULE/COMPONENTS/UNIFIED_MODAL",store,dynamic: true,namespaced: true
})
export default class UnifiedModalDialogService extends VuexModule {

  private _displayFlag: boolean = false;
  private _activeContent: string | null = null;
  private _mainTitle: string | null = null;

  @Action
  public displayDialog({
    targetContentID,mainTitle
  }: UnifiedModalDialogoptions): void {

    this.setActiveContentID(targetContentID);
    this.setSizingMode(sizingMode);

    if (!isUndefined(mainTitle)) {
      this.setMainTitle(mainTitle);
    }

    if (!isUndefined(sizingCustomCSS_Class)) {
      this.setCustomSizingCSS_Class(sizingCustomCSS_Class);
    }

    this.setdisplayFlag(true);
  }

  @Mutation
  public dismiss(): void {
    this._displayFlag = false;
    this._activeContent = null;
    this._mainTitle = null;
  }

  public get displayFlag(): boolean { return this._displayFlag; }
  public get mainTitle(): string | null { return this._mainTitle; }
  public get activeContentID(): string | null { return this._activeContent; }


  @Mutation
  private setdisplayFlag(newFlagValue: boolean): void {
    this._displayFlag = newFlagValue;
  }

  @Mutation
  private setActiveContentID(targetContentID: string): void {
    this._activeContent = targetContentID;
  }

  @Mutation
  private setMainTitle(newMainTitle: string): void {
    this._mainTitle = newMainTitle;
  }
}

现在，如果在关闭模式时需要调用一些附加函数怎么办？ 例如，在下面的示例中，当我们单击模式的“关闭”按钮或单击模式下的暗淡衬底时，我们需要利用finishAccountEditing方法进行帐户编辑：

import { Vue,Component } from "vue-property-decorator";
import { getModule } from "vuex-module-decorators";
import UnifiedModalDialogService
    from "@Components:SharedSingletons/UnifiedModalDialog/UnifiedModalDialogService.vuex";

@Component
export default class AccountsManagementPage extends Vue {

  private onClickEditaccountButton(targetAccount: Account): void {

    private inputtedAccountName: string = "";
    private inputtedEmail: string = "";

    this.inputtedAccountName = targetAccount.name;
    this.inputtedEmail = targetAccount.email;

    getModule(UnifiedModalDialogService).displayDialog({
      targetContentID: this.ACCOUNT_ADDING_AND_EDITING_MODAL_DIALOG_ID,mainTitle: StaticStrings.modalDialogsTitles.accountEditing,sizingMode: UnifiedModalDialogService.SizingModes.fixedMaximalWidth,});
  }

  private finishAccountEditing() void {
    this.inputtedAccountName = "";
    this.inputtedEmail = "";
  }
}

请注意，模式对话框组件不是子组件，因此我们无法通过引用对其进行访问。

尝试和实验

从逻辑上讲正确的解决方案是将函数传递给vuex模块并记住它：

@Component
export default class AccountsManagementPage extends Vue {

  private onClickEditaccountButton(targetAccount: Account): void {

    private inputtedAccountName: string = "";
    private inputtedEmail: string = "";

    this.inputtedAccountName = targetAccount.name;
    this.inputtedEmail = targetAccount.email;

    getModule(UnifiedModalDialogService).displayDialog({
      targetContentID: this.ACCOUNT_ADDING_AND_EDITING_MODAL_DIALOG_ID,// added ↓
      onClose: this.finishAccountEditing.bind(this)
    });
  }

  private finishAccountEditing() void {
    this.inputtedAccountName = "";
    this.inputtedEmail = "";
  }
}

现在，我将尝试在UnifiedModalDialogService模块内调用它（仅用于实验-在displayDialog内）：

@Action
public displayDialog({
  targetContentID,sizingMode,sizingCustomCSS_Class,mainTitle,onClose
}: UnifiedModalDialogoptions): void {

  onClose();

  // ...
}

结果出乎意料：

index.js?0da5:363 Uncaught (in promise) Error: ERR_ACTION_ACCESS_UNDEFINED: 
Are you trying to access this.someMutation() or this.someGetter inside an @Action? 
That works only in dynamic modules. 
If not dynamic use this.context.commit("mutationName",payload) and this.context.getters["getterName"]
Error: Could not perform action displayDialog

至少两个奇怪的时刻：

您是否要在@Act​​ion中访问this.someMutation（）或this.someGetter？

否。

仅在动态模块中有效。

我的模块是动态的：

@Module({
  name: "VUEX_MODULE/COMPONENTS/UNIFIED_MODAL",namespaced: true
})
export default class UnifiedModalDialogService extends VuexModule {
  //...
}

下一个实验是将onClose委托给静态方法。

export default class UnifiedModalDialogService extends VuexModule {

  @Action
  public displayDialog({
    targetContentID,onClose
  }: UnifiedModalDialogoptions): void {

    UnifiedModalDialogService._onClose(onClose);

    this.setActiveContentID(targetContentID);
    this.setSizingMode(sizingMode);

    if (!isUndefined(mainTitle)) {
      this.setMainTitle(mainTitle);
    }

    if (!isUndefined(sizingCustomCSS_Class)) {
      this.setCustomSizingCSS_Class(sizingCustomCSS_Class);
    }

    this.setdisplayFlag(true);
  }
  
  private static _onClose(implementation: () => unkNown): void {
    implementation();
  }
}

结果相同：

index.js?0da5:363 Uncaught (in promise) Error: ERR_ACTION_ACCESS_UNDEFINED

因此，通常可以调用静态方法：

@Module({
  name: "VUEX_MODULE/COMPONENTS/UNIFIED_MODAL",namespaced: true
})
export default class UnifiedModalDialogService extends VuexModule {

  @Action
  public displayDialog({
    targetContentID,onClose
  }: UnifiedModalDialogoptions): void {

    UnifiedModalDialogService.staticmethodExample();

    // ...
  }


  private static staticmethodExample(): void {
    console.log("Im am vuex module static method!");
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）