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

【问题标题】：Error when using vuex-module-decorators and @nuxtjs/auth together一起使用 vuex-module-decorators 和 @nuxtjs/auth 时出错
【发布时间】：2020-11-05 11:00:28
【问题描述】：

我正在使用带有 typescript 的 nuxtjs 并使用 vuex-module-decorators。但是将@nuxtjs/auth 添加到我的项目时出现错误。

未捕获（承诺中）错误：ERR_STORE_NOT_PROVIDED：要使用 getModule()，无论是模块应该在装饰器中使用 store 进行装饰，即 @Module({store: store}) 或调用 getModule() 时需要传递 store，即 getModule(MyModule, this.$store)

调用 Action 时会出现此错误。

当 @nuxtjs/auth 来自模块时没问题。

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 };

【问题讨论】：

标签： vue.js vuex nuxt.js

【解决方案1】：

我像这样添加插件/auth.js：

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
  });
}

然后，您可以在组件中执行操作，这样：

import moduleName from "@/store"

...

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

【讨论】：

plugin/auth.js 永远不会被执行。您能写出完整的设置步骤吗？

【解决方案2】：

我在nuxt.config.js 中将 vuex: false 添加到auth 添加错误消失了，但现在我无法访问组件中的$auth.user。所以我自己做，在vuex中创建用户存储并手动获取用户信息。

【讨论】：