一起使用 vuex-module-decorators 和 @nuxtjs/auth 时出错

Question

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, ie @Module({store: store}) or store should be passed when calling getModule(), ie 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 };

Answer 1

I add the plugin/auth.js like this:

import { initialiseStores } from "~/utils/store-accessor";

export default function ({ $auth, store }) {
  initialiseStores(store); 

  $auth.onError((error, name, endpoint) => {
    console.log(name, error, endpoint);
  });

  $auth.onRedirect((to, from) => {
    // you can optionally change `to` by returning a new value
  });
}

Then, you can execute actions in the component, this way:

import moduleName from "@/store"

...

methods: {
  m() {
    moduleName.someAction()
  }
}

Answer 2

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.