Error when using vuex-module-decorators and @nuxtjs/auth together

[Hamidrezana]

I am using nuxtjs with typescript and use vuex-module-decorators. but I get error when add @nuxtjs/auth to my project.

ERR_STORE_NOT_PROVIDED: To use getModule(), either the module should be decorated with store in decorator, i.e. @Module({store: store}) or store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)

This error happen when call Action.

When @nuxtjs/auth from modules it's ok.

store/index.ts

import { Store } from "vuex";
import { initializeStores } from "~/utils/store-accessor";
const initializer = (store: Store<any>) => initializeStores(store);
export const plugins = [initializer];
export * from "~/utils/store-accessor";

utils/store-accessor

import { Store } from "vuex";
import { getModule } from "vuex-module-decorators";
import Login from "~/store/Login";
import App from "~/store/App";

let loginStore: Login, appStore: App;

function initializeStores(store: Store<any>): void {
    loginStore = getModule(Login, store);
    appStore = getModule(App, store);
}

export { initializeStores, loginStore, appStore };

[DenisNikonov]

You can try:

// nuxt.config.ts
auth: {
    vuex: false
}

[Hamidrezana]

@DenisNikonov This works but is lose accessing user info with $auth.

[AllanPinheiroDeLima]

There is no way on solving this issue ?

[AllanPinheiroDeLima]

Look, I'm not saying that this is pretty, but will solve the issue. Thing is, I don't know what is nuxt/authjs doing that causes this. The workaround I've found to not disable vuex and still mantaining full functionality is to use dynamic stores.

So, you create the store within the declaration of the store's class and keep everything else as it is shown in docs example:

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

interface RootState {}
const store = new Vuex.Store<RootState>({
  actions: {
    nuxtServerInit: () => {}
  }
});

@Module({
  stateFactory: true,
  name: "exams",
  dynamic: true,
  namespaced: true,
  store
})
export default class ExamsStore extends VuexModule {
  public _exam: any = null;
  private _activeTemplate: any = null;

  @Mutation
  setExam (exam: any) {
    this._exam = exam
  }

  @Mutation
  removeExam () {
    this._exam = null
  }

  get exam () {
    return this._exam;
  }

}

[Tcharlyson]

Issue is still open, any news ? I have the same issue

[SilvioDoMine]

I have the same issue.

[estylehq]

I used this solution in [nuxtjs with Typescript documents].

In store section, they described how to using axios module in store module.

Created plug-in and util files, and using axios from created util file.

So, I little modified these.

import { Plugin } from '@nuxt/types'
import { initializeAuth } from '~/utils/auth'

const authAccessor: Plugin = ({ $auth }) => {
  initializeAuth($auth);
};

export default authAccessor;

~/plugins/auth.ts

// define type any. Auth-module has not defined type.
let $auth: any | null = null;

export function initializeAuth(auth: any) {
  $axios = auth;
}

export { $auth }

~/utils/auth.ts

and insert plug-in, not nuxt.config.ts -> plugins, please do nuxt.config.ts -> auth -> plug-ins.

...

const config: NuxtConfig = {
  ...
  auth: {
    ...
    plugins: [~/plugins/auth.ts],
    ...
  },
};

...

nuxt.config.ts

You can use auth module :

import { $auth } from '~/utils/auth';

export default class [MODULE_NAME] extends VuexModule {
   ...
}

~/store/[something].ts