duplicate namespace auth / for the namespaced module auth

J'ai eu cette erreur après avoir installé le module nuxtjs. J'ai essayé toutes les astuces du livre pour résoudre ce problème, mais il semble que rien ne fonctionne.

[vuex] duplicate namespace auth/ for the namespaced module auth

J'en ai été frustré.

auth: {
    plugins: [{ src: '~/plugins/axios', ssr: true }, '~/plugins/auth.js'],
    vuex: {
      namespace: 'auth'
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: "login",
            method: "post",
            propertyName: "meta.token"
          },
          user: {
            url: "me",
            method: "get",
            propertyName: false
          },
          logout: {
            url: "logout",
            method: "post"
          },
          redirect: {
            login: "login",
            logout: "/",
            home: "/",
            callback: "/"
          },
          watchLoggedIn: true,
          rewriteRedirects: true
        }
      }
    }
  },

Plugins

plugins: [
    { src: "~/plugins/Maps.js", ssr: false },
    { src: "~/plugins/Typed.js", ssr: false },
    { src: "~/plugins/Animate.js", ssr: false },
    { src: "~/plugins/Counter.js", ssr: false },
    { src: "~plugins/Vimeo.js", ssr: false },
    "~plugins/mixins/user.js",
    "~plugins/mixins/validation.js",
  ],

auth.js << ---- Magasin

export const getters = {
    authenticated(state) {
        return state.loggedIn;
    },
    user(state) {
        return state.user;
    }
};

export const state = () => ({
    busy: false,
    loggedIn: false,
    strategy: "local",
    user: false
});

Voici le code que j'ai actuellement. Si vous avez besoin de voir un autre fichier, n'hésitez pas à me le faire savoir.

https://www.youtube.com/watch?v=FojAfwueTLc

Face au même problème aujourd'hui après une mise à jour. Résoudre:

Déplacez la logique auth.js vers index.js et supprimez auth.js.

index.js:

export const getters = {
    authenticated(state) {
      return state.auth.loggedIn
    },

    user(state) {
      return state.auth.user
    }
  }

Si vous utilisez un mixin user.js, modifiez-le comme suit:

import Vue from 'vue'
import {mapGetters} from 'vuex'

    const User = {
        install(Vue, options) {
            Vue.mixin({
                computed: {
                    ...mapGetters({
                        user: 'user',
                        authenticated: 'authenticated'
                    })
                }
            })
        }
    };

    Vue.use(User);

Vous avez probablement un fichier dans votre dossier de magasin appelé "auth.js" et vous n'avez pas explicitement défini l'option vuex.namespace dans votre fichier nuxt.config.js.

De la documentation:

chaque fichier .js à l'intérieur du répertoire store est transformé en module d'espacement de noms (l'index étant le module racine).

Cela signifie donc que "auth" devient automatiquement un espace de noms.

Le problème est que "auth" est également l'espace de noms par défaut du magasin Vuex pour conserver l'état car l'option "vuex.namespace" de votre fichier nuxt.config.js est "auth" par défaut si aucune n'est définie explicitement. C'est là que vient le double.

Pour résoudre ce problème, changez votre store / auth.js en quelque chose de différent comme store / authentication.js ou changez votre option vuex.namespace dans votre fichier nuxt.config.js en autre chose que "auth" ou bien elle sera utilisée par défaut .

Par défaut, Nuxt utilise l' espace de noms auth pour réserver les informations d'authentification. Si vous créez également un fichier auth.jsdans le répertoire du magasin, il y aura un conflit avec la configuration par défaut.

La solution fournie par "Panos"est tout à fait correcte. Mais si vous êtes vraiment intéressé par la création d'un nouveau module pour maintenir les informations d'authentification comme vous, vous pouvez créer un fichier Auth.jsau lieu du auth.jsrépertoire du magasin. Ce qui n'entrera pas en conflit avec l'espace de noms par défaut.

Ensuite, vous pouvez retourner les informations d'authentification à partir du module d'authentification nuxt, comme ci-dessous. Ici, j'attrape l'état du module d'authentification en utilisantrootState

export const getters = {
authenticated(state, getters, rootState) {
 return rootState.auth.loggedIn;
},

user(state, getters, rootState) {
 return rootState.auth.user;
}
};

De plus, si vous utilisez un mixin user.js, modifiez-le comme suit:

import Vue from "vue";
import { mapGetters } from "vuex";

const User = {
  install(Vue, options) {
  Vue.mixin({
  computed: {
    ...mapGetters("Auth", {
      user: "user",
      authenticated: "authenticated"
    })
  }
});
}
};
Vue.use(User);