在router里面访问pinia

项目改造， 把原本的vuex换成pinia， 本来一切都挺好的， 但是当我在路由文件里面访问pinia变量的时候， 却报了下面的错误：

应该是在注册pinia之前就调用了pinia， 导致找不到pinia。 可是我的明明在main.js里面注册了呀， 还是在vue-router之前。

然后把报错信息搜一下， 找到了🍍 在 vue-router 中使用 pinia 报错解决 - 掘金 (juejin.cn)这个解决方式， 就是把pinia的注册， 写在单独一个文件里面， 然后导出， 在main.js文件里面引用， 这样在main.js文件里的pinia就已经是注册好的状态了， 也就不会出现未注册的报错了。 下面是vue2.7的例子， vue3.0原理一样。

// stores/index.js

import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
export default createPinia()

// main.js

import Vue from 'vue'
import App from './App.vue'
import pinia from '@/stores/index' // 引入位置要在router之前
import router from '@/router/index'
new Vue({
  router,
  pinia,
  render: h => h(App),
}).$mount('#app')

需要注意的一点， 就是在main.js文件里面， pinia的引入要在router之前， 否则还是报错的。