Pinia problem

Hi, I have a problem with the pinia in my nuxt project. I installed it according to the instructions in the documentation: https://pinia.vuejs.org/ssr/nuxt.html

Specifically, I just ran this command:

npx nuxi@latest module add pinia

npx nuxi@latest module add pinia

But I get an error when I want to use it. What can I do about it please?

[

]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"? See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help. This will fail in production.

// stores/errorStore.ts
import { defineStore } from 'pinia';

export const useErrorStore = defineStore('errorStore', {
  state: () => ({
    errorMessage: '' as string | null,
  }),
  actions: {
    setError(message: string) {
      this.errorMessage = message;
    },
    clearError() {
      this.errorMessage = null;
    },
  },
});

// stores/errorStore.ts
import { defineStore } from 'pinia';

export const useErrorStore = defineStore('errorStore', {
  state: () => ({
    errorMessage: '' as string | null,
  }),
  actions: {
    setError(message: string) {
      this.errorMessage = message;
    },
    clearError() {
      this.errorMessage = null;
    },
  },
});

components/error.vue:

<template>
  <div v-if="errorMessage">
    {{ errorMessage }}
    <button type="button" @click="clearError">
      Clear error
    </button>
  </div>
</template>

<script lang="ts" setup>
const errorStore = useErrorStore();

const errorMessage = computed(() => errorStore.errorMessage);
const clearError = () => errorStore.clearError();
</script>

<template>
  <div v-if="errorMessage">
    {{ errorMessage }}
    <button type="button" @click="clearError">
      Clear error
    </button>
  </div>
</template>

<script lang="ts" setup>
const errorStore = useErrorStore();

const errorMessage = computed(() => errorStore.errorMessage);
const clearError = () => errorStore.clearError();
</script>

Nuxt•16mo ago•

11 replies

Rush

Pinia problem

npx nuxi@latest module add pinia

npx nuxi@latest module add pinia

But I get an error when I want to use it. What can I do about it please?

[

// stores/errorStore.ts
import { defineStore } from 'pinia';

export const useErrorStore = defineStore('errorStore', {
  state: () => ({
    errorMessage: '' as string | null,
  }),
  actions: {
    setError(message: string) {
      this.errorMessage = message;
    },
    clearError() {
      this.errorMessage = null;
    },
  },
});

// stores/errorStore.ts
import { defineStore } from 'pinia';

export const useErrorStore = defineStore('errorStore', {
  state: () => ({
    errorMessage: '' as string | null,
  }),
  actions: {
    setError(message: string) {
      this.errorMessage = message;
    },
    clearError() {
      this.errorMessage = null;
    },
  },
});

components/error.vue:

<template>
  <div v-if="errorMessage">
    {{ errorMessage }}
    <button type="button" @click="clearError">
      Clear error
    </button>
  </div>
</template>

<script lang="ts" setup>
const errorStore = useErrorStore();

const errorMessage = computed(() => errorStore.errorMessage);
const clearError = () => errorStore.clearError();
</script>

<template>
  <div v-if="errorMessage">
    {{ errorMessage }}
    <button type="button" @click="clearError">
      Clear error
    </button>
  </div>
</template>

<script lang="ts" setup>
const errorStore = useErrorStore();

const errorMessage = computed(() => errorStore.errorMessage);
const clearError = () => errorStore.clearError();
</script>

Pinia problem

Similar Threads

Pinia problem

Similar Threads

Similar Threads

Similar Threads