vue3項(xiàng)目引入pinia報(bào)錯(cuò)的簡單解決

更新時(shí)間：2023年10月10日 10:09:43 作者：Jl.610

這篇文章主要介紹了vue3項(xiàng)目引入pinia報(bào)錯(cuò)的簡單解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3項(xiàng)目引入pinia報(bào)錯(cuò)

1.控制臺(tái)錯(cuò)誤提示：getActivePinia was called with no active Pinia. Did you forget to install pinia?

2.報(bào)錯(cuò)原因

pinia集成順序錯(cuò)誤掛載已經(jīng)結(jié)束,但pinia集成失敗運(yùn)行報(bào)錯(cuò)

3.解決方案：調(diào)整順序?qū)?pinia的集成放在#app的掛載之前

app.use(createPinia()).use(router).mount('#app')

vue3+Pinia使用經(jīng)歷(常見報(bào)錯(cuò)、警告)

近期在路由傳參中使用params時(shí)發(fā)現(xiàn)報(bào)了這么一個(gè)錯(cuò)誤：

const Edit = (scope) => {
    const val = JSON.stringify(scope)
    router.push({ name: 'upload', params: { val } })
}

點(diǎn)進(jìn)鏈接后提示讓我使用pinia或者vuex狀態(tài)管理，于是照著pinia文檔創(chuàng)建了pinia.js頁面用來存放數(shù)據(jù)：

//pinia.js
import {defineStore} from 'pinia'
import {reactive} from 'vue'
export const usePiniasStore = defineStore('alerts', () => {
    const arr = reactive({
        msg: ''
    })
    function getMsg(e) {
        arr.msg = e
    }
    return { arr, getMsg }
})

將組件中的數(shù)據(jù)傳入pinia.js文件：

//dishes.vue
import { usePiniasStore } from '@/store/pinia'
export default {
    setup() {
        const dishesStore = usePiniasStore()
        const Edit = (scope) => {
            const val = JSON.stringify(scope)
            dishesStore.getMsg(val)
            router.push({ name: 'upload' })
        }
    }
}

緊接著報(bào)了這么個(gè)錯(cuò)誤：

百度了一下告訴我要先掛載再使用，于是我將createApp、createPinia、App引入進(jìn)行掛載：

//dishes.vue
import { usePiniasStore } from '@/store/pinia'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from '@/App.vue'
export default {
    setup() {
        const pinia = createPinia()
        const app = createApp(App)
        app.use(pinia)
        const dishesStore = usePiniasStore()
        const Edit = (scope) => {
            const val = JSON.stringify(scope)
            dishesStore.getMsg(val)
            router.push({ name: 'upload' })
        }
    }
}

這個(gè)時(shí)候再在另一個(gè)組件中便能取到pinia.js中的數(shù)據(jù)了：

//upload.vue
import { usePiniasStore } from '@/store/pinia'
export default {
    setup() {
        const storex = usePiniasStore()
        const etid_data = storex.arr.msg
        console.log(etid_data);
    }
}

至此，問題解決！