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

Question

我一直在尝试在我的vue应用程序中使用Pinia进行国家管理。我在main.js文件夹中初始化pinia之前就遇到了使用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

这是存储数据的地方。user.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'时，这一行将被导出，此时还没有定义Pinia。