Vue项目Pinia报错：getActivePinia()无活跃实例问题求助

在Vue项目中已安装并配置Pinia（app.use(createPinia())），但访问store时仍触发上述报错，相关代码如下：

Vue组件文件 #

<script>
import SideUpBar from "@/components/SideUpBar.vue";
import {mapActions, mapState} from "pinia"
import { useUsersStore } from "@/stores/users"

const usersStore = useUsersStore()

export default {
  name: "NewView",
  components: {SideUpBar},
  data: () => ({
    //
  }),
  computed: {
    ...mapState(useUsersStore, ['users']),
  },
  methods: {
    // ...mapActions(useUsersStore, ['fetchUsers']),
  },
  created() {
    usersStore.fetchUsers()
  },
}
</script>

<template>
  <v-layout class="dim">
    <SideUpBar/>
    <v-main style="background: #C19A6B">
      <v-list
        :items="users"
        item-title="username"
      ></v-list>
    </v-main>
  </v-layout>
</template>

<style>
.dim {
  width: 100vw;
  height: 100vh;
}
</style>

main.js #

import '@mdi/font/css/materialdesignicons.css'

import { createApp } from 'vue'
import {createPinia, setActivePinia} from 'pinia'

import App from './App.vue'
import router from './router'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import  * as components from 'vuetify/components'
import  * as directives from 'vuetify/directives'

const vuetify= createVuetify({
    components,
    directives,
})

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(vuetify)

app.mount('#app')

users.js（store文件） #

import {defineStore} from "pinia"

import axios from "axios"
import {ca} from "vuetify/locale";

export const useUsersStore = defineStore("user", {
    state: () => ({
        users: [],
    }),
    actions: {
        async fetchUsers() {
            try {
                const data = await axios.get('api/users')
                let users = data.data.data
                this.users = users
                console.log(data)
            } catch (e) {
                alert(e)
                console.log(e)
            }
        },
    },
})

问题原因与解决方案 #

问题核心 #

你在组件的全局作用域直接调用了useUsersStore()，此时Vue实例还未完成Pinia的挂载，找不到活跃的Pinia实例，所以触发报错。

解决方案 #

有两种修改方式，任选其一即可：

方式1：将store实例化移到组件钩子函数内

修改组件的<script>部分，把useUsersStore()的调用移到created钩子中：

<script>
import SideUpBar from "@/components/SideUpBar.vue";
import {mapActions, mapState} from "pinia"
import { useUsersStore } from "@/stores/users"

export default {
  name: "NewView",
  components: {SideUpBar},
  data: () => ({
    //
  }),
  computed: {
    ...mapState(useUsersStore, ['users']),
  },
  methods: {
    // ...mapActions(useUsersStore, ['fetchUsers']),
  },
  created() {
    const usersStore = useUsersStore()
    usersStore.fetchUsers()
  },
}
</script>

方式2：使用Pinia的mapActions辅助函数（更贴合选项式API风格）

取消手动实例化store，直接用mapActions绑定方法，在created中调用：

<script>
import SideUpBar from "@/components/SideUpBar.vue";
import {mapActions, mapState} from "pinia"
import { useUsersStore } from "@/stores/users"

export default {
  name: "NewView",
  components: {SideUpBar},
  data: () => ({
    //
  }),
  computed: {
    ...mapState(useUsersStore, ['users']),
  },
  methods: {
    ...mapActions(useUsersStore, ['fetchUsers']),
  },
  created() {
    this.fetchUsers()
  },
}
</script>

额外说明 #

• mapState和mapActions本身不需要提前实例化store，它们会在组件挂载后自动关联活跃的Pinia实例，所以这部分代码无需修改。
• 确保main.js中app.use(createPinia())的调用在app.mount('#app')之前，你的现有代码已经满足这个条件，无需调整。

内容的提问来源于stack exchange，提问作者Lorenzo Manuél Cella