vue2 在router中使用pinia

之前在使用vuex的时候，在router中是可以直接使用的。现在换成了pinia，发现在router中使用没有那么简单。下面示例可以让你在router中也能丝滑的使用pinia

1. 创建pinia

 在stores目录下创建pinia.js，这个js是用来初始化pinia的（stores目录换成别的也可以）。代码如下：

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

 2. 在main.js中引入

// 引入vue
import Vue from 'vue'
import App from './App.vue'

// ... 这里引入其他的组件
...

// 引入Pinia
import {PiniaVuePlugin} from 'pinia'
Vue.use(PiniaVuePlugin)
// 这里是第一步创建的js文件
import pinia from '@/stores/pinia'

// 引入router
import router from './router/routers'
import './router/index'

new Vue({
  pinia,
  router,
  render: h => h(App),
}).$mount('#app')

3. 在router文件中使用pinia

'@/router/index.js'部分代码示例：

// pinia
import pinia from '@/stores/pinia'
import UserStore from "@/stores/user.store"

// 路由定义
import router from './routers'

router.beforeEach((to, from, next) => {
    if (to.path === "/") {
        next("/home")
    } else {
        // 重点：这里需要把pinia传入到自定义的状态管理器中
        UserStore(pinia).onLoadUser()
    }
}