0

Estoy creando un par de stores con vue 3, una de ellas (user.js) contiene la siguiente estructura:

import { defineStore } from 'pinia';
import { useGlobalStore } from './global.js';

// Esta línea me arroja el error
const globalStore = useGlobalStore();

export const useUserStore = defineStore('user', {
    state: () => {
        return {
            formCreate: {
                name: '',
                age: '',
                job: ''
            },
            validations: {
                name: globalStore.validations.hasUpperCase,
            }
        }
    }
});

Esto me arroja el error:

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia)

Allí donde lo indico, resulta que estoy importando otra store llamada global.js, la cual tiene la siguiente estructura:

import { defineStore } from 'pinia';

export const useGlobalStore = defineStore('global', {
    state: () => {
        return {
            validations: {
                hasUpperCase: value => /[A-Z]/.test(value),
            },
        }
    }
});

Ya realicé lo que indica el error, importar pinia desde la creación de la app en app.js:

//...
import { createPinia } from 'pinia';
const pinia = createPinia();

//...
createApp({ render: () => h(App, props) })
    .use(pinia)
    .mount(el);

Sé claramente que el problema no es sobre instalación o instancia de pinia, ya que intenté usar tanto user.js y global.js de manera independiente desde mis componentes de Vue y funcionan ambos correctamente, el problema es que no puedo acceder entre stores. ¿Habrá alguna solución?

1 respuesta 1

0

No debe declararse fuera de la instancia donde importa: Son únicas, es decir, al exportar useGlobalStore que usa defineStore crea conflicto porque no sabe cual es la correcta.

import { defineStore } from 'pinia';
import { useGlobalStore } from './global.js';

export const useUserStore = defineStore('user', {
  state: () => ({
    formCreate: {
      name: '',
      age: '',
      job: '',
      hash:'', //{}, [], ...
    }
  }),
  /* Es mejor usar getter para extraer el hash y asignarlo al estado:
     (No debe depender el estado del store de instancias de otro por reactividad)*/
  getters: {
    hash: () => useGlobalStore().validations.hasUpperCase
  }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.