调用 getActivePinia 时没有激活 Pinia。维埃

Question

我收到此错误：未捕获错误：[]：在没有活动 Pinia 的情况下调用 getActivePinia。您是否忘记安装 pinia？\nconst pinia = createPinia()\napp.use(pinia)\n这将在生产中失败。\nat useStore (pinia.mjs:1691:19)\nat PokemonDetails.vue:3:22

\n

我的代码有什么问题吗？

\n

口袋妖怪详情：

\n

<script>\nimport { usePokemonStore } from '../stores/PokemonStore';\nconst pokemonStore = usePokemonStore();\nexport default {\n  name: 'PokemonDetails',\n  methods: {\n    evolutions() {\n      return [\n        pokemonStore.evolutionOne,\n        pokemonStore.evolutionTwo,\n        pokemonStore.evolutionThree,\n      ];\n    },\n    resetApp() {\n      this.$router.push('/');\n      pokemonStore.$reset();\n    },\n  },\n};\n</script>\n\n<template>\n  <template v-if="pokemonStore.findPokemon == false">\n    <div class="firstDiv">\n      <div class="secondDiv">\n        <div>\n          <strong>{{ pokemonStore.pokemonName }}</strong\n          ><img :src="pokemonStore.selfie" alt="foto de pokemon" />\n          <p>Elemento Principal: {{ pokemonStore.type }}</p>\n        </div>\n        <div>\n          <strong>Habilidades:</strong>\n          <ul>\n            <li v-for="stat in pokemonStore.stats[0]">\n              {{ stat.stat.name }}: +{{ stat.base_stat }}\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div class="divEvolutions">\n        <strong>Evolu\xc3\xa7\xc3\xa3o</strong>\n        <ul class="evolutions">\n          <li v-for="evolution in evolutions">\n            <img :src="evolution.selfie" />\n            {{ evolution.name }}\n          </li>\n        </ul>\n      </div>\n      <button v-on:click="resetApp" class="newSearch">Nova pesquisa</button>\n    </div>\n  </template>\n</template>\n\n<style lang="scss" scoped>\n.firstDiv {\n  text-align: center;\n}\n.secondDiv {\n  display: grid;\n  justify-items: center;\n  align-items: center;\n  grid-template-columns: repeat(2, 1fr);\n  max-height: 600px;\n  width: 400px;\n  padding: 20px;\n  border-radius: 1.5rem;\n  background-color: $gray-200;\n  div {\n    display: flex;\n    flex-direction: column;\n  }\n}\n.divEvolutions {\n  background-color: $gray-200;\n  border-radius: 1.5rem;\n  margin-top: 10px;\n}\n.evolutions {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  li {\n    display: flex;\n    flex-direction: column;\n  }\n}\n.newSearch {\n  margin-top: 10px;\n  padding: 5px;\n  border-radius: 1rem;\n  background-color: $gray-200;\n  transition-duration: 500ms;\n  &:hover {\n    background-color: black;\n    color: $gray-200;\n  }\n}\n</style>\n

\n

pokemonStore.js：

\n

import { defineStore } from 'pinia';\n\nexport const usePokemonStore = defineStore('pokemon', {\n  state: () => ({\n    findPokemon: true,\n    pokemonName: '',\n    speciesLink: '',\n    selfie: '',\n    type: '',\n    stats: [],\n    evolutionOne: {},\n    evolutionTwo: {},\n    evolutionThree: {},\n  }),\n  getters: {},\n  actions: {\n    addPokemon(\n      name,\n      species,\n      selfie,\n      type,\n      stats,\n      evolutionOne,\n      evolutionTwo,\n      evolutionThree\n    ) {\n      this.pokemonName = name;\n      this.speciesLink = species;\n      this.selfie = selfie;\n      this.type = type;\n      this.stats.push(stats);\n      this.findPokemon = false;\n      this.evolutionOne = evolutionOne;\n      this.evolutionTwo = evolutionTwo;\n      this.evolutionThree = evolutionThree;\n    },\n  },\n});\n

\n

main.js：

\n

import { createApp } from 'vue';\nimport { createPinia } from 'pinia';\n\nimport App from './App.vue';\nimport router from './router';\n\nimport './assets/main.css';\n\nconst app = createApp(App);\n\napp.use(createPinia());\napp.use(router);\n\napp.mount('#app');\n

\n

我尝试用计算方式调用我的商店：

\n

  computed: {\n    pokemonStore() {\n      return usePokemonStore();\n    },\n    evolutions() {\n      return [\n        this.pokemonStore.evolutionOne,\n        this.pokemonStore.evolutionTwo,\n        this.pokemonStore.evolutionThree,\n      ];\n    },\n  },\n

\n

它有效，但我相信这不是最佳实践

\n

Answer 1

在 Pinia 安装到 Vue 应用程序之前，不应使用商店。

use...Pinia 创建可组合项而不是存储对象的原因defineStore是这样可以避免竞争条件。

这里usePokemonStore是pokemonDetails在 Pinia 安装之前调用的。pokemonStore在模板中引用，但它不是组件实例的一部分。对于具有选项 API 的组件，它应该是：

  name: 'PokemonDetails',
  data() {
    return { pokemonStore: usePokemonStore() }
  },