Search code examples
vue.jsvuexnuxt.js

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


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

Uncaught (in promise) Error: 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

/* eslint-disable import/no-mutable-exports */
import { Store } from "vuex";
import { getModule } from "vuex-module-decorators";
import { NuxtAxiosInstance } from "@nuxtjs/axios";
import Login from "~/store/Login";
import App from "~/store/App";

let $axios: NuxtAxiosInstance;

function initializeAxios(axiosInstance: NuxtAxiosInstance) {
    $axios = axiosInstance;
}

let loginStore: Login, appStore: App;

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

export { initializeStores, initializeAxios, loginStore, appStore, $axios };

Solution

  • I add vuex: false to auth in nuxt.config.js add error gone, but now I do not access to to $auth.user in components. So I do it by my self and create user store in vuex and manually get user info.