vuejs3 - 在 nuxt 3 中设置 pinia 商店时遇到困难

Question

我目前正在尝试使用 nuxt 3 和 pinia 来设置一个项目进行状态管理，但遇到了以下错误:

[h3] [unhandled] H3Error: defineStore is not defined
    at createError (file:///home/johnr/Code/Personal/test/node_modules/h3/dist/index.mjs:191:15)
    at Server.nodeHandler (file:///home/johnr/Code/Personal/test/node_modules/h3/dist/index.mjs:381:21) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}

我使用 npx nuxi init 初始化了项目，然后运行 ​​npm i，然后运行 ​​npm install @pinia/nuxt。然后我将 pinia 添加到 nuxt.config.ts 中:

 // nuxt.config.js
    export default {
        // ... other options
        modules: [
            // ...
            '@pinia/nuxt',
        ],
    }

并在 store/counter.js 中创建了一个基本商店:

 export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  function increment() {
    count.value++;
  }

  return { count, increment };
});

并尝试在应用模板中使用返回的计数:

<template>
  <div>
    <p>The count is {{ counterStore.count.value }}</p>
  </div>
</template>

<script setup>
import { useCounterStore } from './store/counter.js';
const counterStore = useCounterStore();
</script>

Answer 1

您似乎忘记在 store/counter.js 中导入 defineStore:

从“pinia”导入{defineStore}