vue.js nuxt3如何调用pinia store in composeable

egdjgwm8  于 2023-05-01  发布在  Vue.js
关注(0)|答案(2)|浏览(290)

因为nuxt 3.4.0更新pinia存储不能再在可组合中使用。

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

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

你现在会收到下面的错误

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

参见stackblitz示例https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts

km0tfn4u

km0tfn4u1#

这是因为const authStore = useAuthStore();声明在任何函数之外,就像你所做的那样,在应用程序启动的早期被调用,而且肯定是在Pinia示例在Vue示例中正确初始化之前。
它将像这样工作:

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

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

安全的地方做Pinia电话(可能不是一个完整的列表):

  • <script setup>
  • 内联<template>部分
  • 内部defineNuxtMiddleware
agxfikkp

agxfikkp2#

您在nuxt.config.ts中错误地安装了@pinia/nuxt模块。buildModules属性在Nuxt 3中不再存在,您必须使用modules。(你可以通过你得到的Typescript错误来判断):

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

第二点,您还需要从可组合函数中调用useAuthStore,否则它会在pinia实际加载之前尝试加载存储。它会在文件导入时被调用,而不是在使用组合物时被调用。

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

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

查看工作的stackblitz

相关问题