Error "[vuex] unknown action type:" in Nuxt, however I did all exactly according "Accessing modules with NuxtJS" documentation

Let me repeat: I did all according Accessing modules with NuxtJS explanations.

Store Module:

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


@Module({
  stateFactory: true,
  name: "AUTHENTICATION__STORE_MODULE"
})
export default class AuthenticationStoreModule extends VuexModule {

  private _token: string | null = null;

  @Action
  public async signIn(formData: { userId: string, password: string }): Promise<void> {
    console.log("Called！");
    const token: string = await new Promise(
        (resolve: (token: string)=> void): void => {
          setTimeout(() => { resolve('mock-token'); }, 2000);
        });
    console.log(token);
  }

  // ...
}

TypeScript types validation is all right. However, await authenticationStoreModule.signIn(formData) does not work.

Component:

import { Vue, Component, Prop } from 'vue-property-decorator';
import VueReferencesInspector from '~/utils/VueReferencesInspector';

import { authenticationStoreModule } from "~/store/";

interface IElementUiForm extends Vue {
  validate: (validationResult: (valid: boolean)=> void)=> void;
}


@Component
export default class extends Vue {

  // ...

  private onSubmit(): void {

    // ...

      try {

        console.log('~~~');
        console.log(authenticationStoreModule);
        console.log(authenticationStoreModule.signIn(formData));

        await authenticationStoreModule.signIn(formData);
        this.$router.push('/admin');
      } catch (error) {
        this.dataIsBeingSubmittedNow = false;
      }
    });
  }
}

console.logs are;

As you see authenticationStoreModule and authenticationStoreModule.signIn are not undefined. However, console.log("Called！"); did not output, so action signIn has not been called.

📁Repro Project

Once npm install done,

1. Execute npm run dev
2. go to page http://localhost:3000/admin/login
3. Try to login

You will see same console errors as in image.

[woubuc]

It took me some trial and error, and the documentation & examples don’t mention this at all, but it seems that you have to export default your module classes. See my minimal example that seems to work correctly.

[danielroe]

Try:

@Module({
  name: 'auth',
  stateFactory: true,
  namespaced: true,
})

For Nuxt usage you should match the filename and namespace of your module, so this module should be in ~/store/auth.ts.