web-dev-qa-db-fra.com

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. Ajout de plus d'informations.

[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

vue.jsvuexnuxt.jsnuxt
4
manshu

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);
3
Panos

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 .

2
Victor Abbah Nkoms

Par défaut, Nuxt utilise auth namespace pour réserver les informations d'authentification. Si vous créez également un fichier auth.js dans le répertoire du magasin, il y aura alors conflit avec la configuration par défaut.

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

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

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);
0
Imtiaz Pabel