admin 管理员组

文章数量: 1086019

Since the nuxt 3.4.0 update the pinia store can no longer be used in poseables.

//example posable
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();

export function doSomethingWithStore() {
  return authStore.checkAuthUser;
}

you will now receive the below error

getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

see stackblitz example .js,nuxt.config.ts

Since the nuxt 3.4.0 update the pinia store can no longer be used in poseables.

//example posable
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();

export function doSomethingWithStore() {
  return authStore.checkAuthUser;
}

you will now receive the below error

getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

see stackblitz example https://stackblitz./edit/broken-pinia-store-in-poseables?file=posables%2FthisBreaks.js,nuxt.config.ts

  • javascript
  • vue.js
  • nuxt.js
  • pinia
  • nuxt-plugin
Share Improve this question asked Apr 21, 2023 at 15:11 Jean-Pierre EngelbrechtJean-Pierre Engelbrecht 2741 gold badge5 silver badges11 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 5

It is because const authStore = useAuthStore(); declared outside any function like you did is called at some early point of application startup and definitely before Pinia instance is properly initialized inside Vue instance.

Like this it will work:

import { useAuthStore } from '~/store/auth-store';

export function doSomethingWithStore() {
  const authStore = useAuthStore();
  return authStore.checkAuthUser;
}

Safe places to do Pinia calls (might not be a plete list):

  • from within <script setup>
  • inline in <template> section
  • inside defineNuxtMiddleware

You wrongly installed the @pinia/nuxt module in nuxt.config.ts. The buildModules property no longer exists in Nuxt 3, you have to use modules instead. (And you can tell by the Typescript error you get):

// nuxt.config.ts
export default defineNuxtConfig({
  // replace buildModules by modules
  modules: ['@pinia/nuxt'],
});

Second point, you also need to call the useAuthStore from within the posable function, otherwise it's trying to load the store before pinia actually loaded. It's gonna get called when the file is imported, not when the posable is used.

import { useAuthStore } from '~/store/auth-store';

export function doSomethingWithStore() {
  const authStore = useAuthStore();
  return authStore.checkAuthUser;
}

See a working stackblitz

If you're new to Nuxt or its dev tools, you may have only installed @pinia/nuxt if you have used the dev tools for installation. It's important to remember that you also need to install pinia itself. In case you overlooked this step, make sure to install both pinia and @pinia/nuxt.

You can do this by running one of the following mands:


pnpm install -D pinia @pinia/nuxt
# or
yarn add -D pinia @pinia/nuxt
# or
npm install -D pinia @pinia/nuxt

link to Pinia docs: https://pinia.vuejs/ssr/nuxt.html#Installation

本文标签： javascriptnuxt3 how to call pinia store in composeableStack Overflow

版权声明：本文标题：javascript - nuxt3 how to call pinia store in composeable - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744075164a2529212.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。