vuex-module-decorators: 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,

Execute npm run dev
go to page http://localhost:3000/admin/login
Try to login

You will see same console errors as in image.

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 4
Comments: 27 (9 by maintainers)

Most upvoted comments

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.

+23

woubuc on Feb 16, 2020

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.

+22

danielroe on Sep 22, 2019

None of the solutions proposed here work for me either. I’ve recreated the issue in this repo:

https://github.com/qelix/nuxt-vuex-module-decorators-repro

Steps to reproduce:

Clone repo, run yarn && yarn dev
Open localhost:3000
Open dev tools to find [vuex] unknown mutation type: test/setTest in console as proof that it doesn’t work

Or just use Codesandbox: https://codesandbox.io/s/github/qelix/nuxt-vuex-module-decorators-repro

It is a simple reproduction of the issue, containing only a minimal configuration. I did everything according to the docs and the comments in this issue. Still can’t get it to work, though.

Am I missing anything?

jpoep on Jan 9, 2020

@webcoderkz Either move the module to ~/store/auth.ts, move it out of the ~/store directory entirely, or pass it the namespace modules/auth.

danielroe on Nov 4, 2019

My code is here.

import { createComponent, reactive } from '@vue/composition-api'
import { userStore } from '@/store'

....
setup() {
    const state = reactive<State>({
      email: 'mail@sample.com',
      password: 'pass'
    })

    const login = () => {
      // eslint-disable-next-line no-console
      console.log('userStore', userStore)
      userStore.Login(state.email, state.password)
      // root.$router.push("/")
    }

    return {
      state,
      login
    }
  }
....

utils/store-accessor.ts

import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import { User } from '~/store/user'

// eslint-disable-next-line import/no-mutable-exports
let userStore: User

function initialiseStores(store: Store<any>): void {
  userStore = getModule(User, store)
}

export { initialiseStores, userStore }

mikinovation on Dec 21, 2019

@webcoderkz I believe the answer is there. In your case:

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

But I may be misunderstanding your question.

danielroe on Nov 4, 2019

This might be the solution. For me exactly! Module name with namespace @/store/Vdp/main.ts

@Module({
  name: 'Vdp/main',
  namespaced: true,
  stateFactory: true
})
export default class main extends VuexModule {}

ceo-gazprom on Oct 16, 2020