“我无法访问 Pinia，它似乎还没有被初始化，虽然它之前在 main.js 中被调用过”

最近使用vue3+pinia搭建项目时遇到了这样的一个问题，当我想在路由文件中去使用pinia做一些动作的时候发现了这个报错；分析了一下初步判断是 router 初始化的时候 pinia 还没有初始化完成。

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?

报错时的代码是这个样子的

store.ts 文件

import { createPinia } from 'pinia'
const store = createPinia()
export default store

router.ts 文件

在这里使用

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const router = createRouter({
  history: createWebHistory(),
  routes,
})
router.beforeEach((to, from, next) => {
  next()
})
export default router

main.ts 文件

在main.ts正常引入

import App from '@/App.vue'
import router from './router'
import { createApp } from 'vue'
import store from '@/store'
app.use(store)
app.use(router)
app.mount('#app')

这个时候控制台就有那个报错了！！！

就因为在router中使用时他还没有初始化完成。

后来看了一下啊vben的那个开源项目的写法，确实写得非常好，它是在每个useXXXStore中创建了一个withOut的方法，是专门提供给外部文件使用的方法。

最后附上我的修改后的代码

store.ts 文件

import type { App } from 'vue'
import { createPinia } from 'pinia'

const store = createPinia()

export function setupStore(app: App<Element>) {
  app.use(store)
}

export { store }

useUserStore.ts 文件

注意最后的那个方法，将useUserStore中注入了store

import { defineStore } from 'pinia'
import { store } from '@/store'
import { getToken } from '@/utils/http/cookie'
export const useUserStore = defineStore({
  id: 'userStore',
  state: () => {
    return {}
  },
  getters: {
  },
  actions: {
  },
})

export function useUserStoreWithOut() {
  return useUserStore(store)
}

router.ts 文件

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'
import { useUserStoreWithOut } from '@/store/modules/user'
const userStore = useUserStoreWithOut()
const router = createRouter({
  history: createWebHistory(),
  routes,
})
router.beforeEach((to, from, next) => {
  console.log(userStore.getToken)
  next()
})
export default router

main.ts 文件

import App from '@/App.vue'
import router from './router'
import { createApp } from 'vue'
import { setupStore } from '@/store'
setupStore(app)
app.use(router)
app.mount('#app')