Pinia 没有在路由器中为 vue js 初始化

Question

我一直在尝试在我的 vue 应用程序中使用 Pinia 进行状态管理。 我一直遇到在 main.js 文件夹中初始化之前使用 pinia 的问题。

这是路由文件。

import { createRouter, createWebHistory } from 'vue-router'
import {useUserStore} from '../stores/user'

const store = useUserStore()

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/', 
      name: 'login',
      component: () => import('../views/LoginView.vue')

    },
    {
      path: '/Dash',
      name: 'dash',
      component: () => import('../views/authed/DashView.vue'),
      // beforeEnter: (to, from) => {
      // }
    },
    {
      path: '/Register',
      name: 'register',
      component: () => import('../views/RegisterView.vue')
    }
  ]
})



export default router

这是存储数据的地方。 用户.js

import { ref, computed, watch } from 'vue'
import { defineStore } from 'pinia'
import axios from 'axios'



export const useUserStore = defineStore('user', () => {
    const user = ref ({
        name: "",
        token: "",
        auth: false,
        
    })


    // if (localStorage.getItem('user')) {
    //     user.value = JSON.parse(localStorage.getItem('user'))
    // }
    // watch(
    //     user,
    //         (userVal) => {
    //             localStorage.setItem('User', JSON.stringify(userVal))
    //         },
    //         { deep: true}
    // )

    const setAuth = (newToken, successAuth, authedName) => {
        user.value.token = newToken
        user.value.auth = successAuth
        user.value.name = authedName
    }

    const checkAuth = () => {
        try {
            const response =  axios.post('api/get-user', {}, {
                headers: {
                    Authorization: `Bearer ${user.value.token}`
                }
            })
            .then(({ data: userData }) => {
                console.log('USER IS AUTHED')
            })
        } catch (err) {
            console.log(err)
        }
    }
    return {
        user,
        setAuth,
        checkAuth,
    }
},
{
    persist: true
})

这是 main.js 文件。

import { createApp, watch } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import axios from 'axios'

import './assets/main.css'
const pinia = createPinia()

// if (localStorage.getItem('user')) {
//     pinia.user.value = JSON.parse(localstorage.getItem('user'))

// }

// watch(
//     pinia.state,
//     (state) => {
//         localStorage.setItem('state', JSON.stringify(state))
//     },
//     { deep: true }
// )


const app = createApp(App)
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router, axios)

app.mount('#app')

这是我的错误...

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.
    at useStore (pinia.js?v=3c6f7703:1256:13)
    at index.js?t=1658100067018:5:9

当我添加到路由器文件时发生错误，我需要在这里使用它，以便我可以验证用户以使用某些路由。

import {useUserStore} from '../stores/user'


store = useUserStore()

这是我从第一个答案中对 main.js 文件所做的编辑，但是移动我导入文件的位置并没有什么不同，仍然得到相同的错误。

import { createApp, watch } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import axios from 'axios'

import './assets/main.css'
const pinia = createPinia()




const app = createApp(App)
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
import router from './router'

app.use(router, axios)

app.mount('#app')

Answer 1

在您的 main.js 文件中，当您import router from './router'时，此行将执行const store = useUserStore()此时 Pinia 尚未定义。