vue3項目引入pinia報錯的簡單解決
更新時間：2023年10月10日 10:09:43 作者：Jl.610
這篇文章主要介紹了vue3項目引入pinia報錯的簡單解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3項目引入pinia報錯
1.控制臺錯誤提示：getActivePinia was called with no active Pinia. Did you forget to install pinia?
2.報錯原因
pinia集成順序錯誤 掛載已經結束,但pinia集成失敗 運行報錯
3.解決方案：調整順序將 pinia的集成放在#app的掛載之前
app.use(createPinia()).use(router).mount('#app')vue3+Pinia使用經歷(常見報錯、警告)
近期在路由傳參中使用params時發(fā)現報了這么一個錯誤：
const Edit = (scope) => {
const val = JSON.stringify(scope)
router.push({ name: 'upload', params: { val } })
}
點進鏈接后提示讓我使用pinia或者vuex狀態(tài)管理，于是照著pinia文檔創(chuàng)建了pinia.js頁面用來存放數據：
//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 }
})將組件中的數據傳入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' })
}
}
}緊接著報了這么個錯誤：
百度了一下告訴我要先掛載再使用，于是我將createApp、createPinia、App引入進行掛載：
//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' })
}
}
}這個時候再在另一個組件中便能取到pinia.js中的數據了：
//upload.vue
import { usePiniasStore } from '@/store/pinia'
export default {
setup() {
const storex = usePiniasStore()
const etid_data = storex.arr.msg
console.log(etid_data);
}
}至此，問題解決！
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue?循環(huán)動態(tài)設置ref并獲取$refs方式
這篇文章主要介紹了vue?循環(huán)動態(tài)設置ref并獲取$refs方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue常用的三種傳值方式有:??父傳子??子傳父??非父子傳值?引用官網的一句話:父子組件的關系可以總結為?prop?向下傳遞,事件向上傳遞,熟悉vue各類關系的組件之間傳值方法會令開發(fā)更加得心應手,下面將對父子、兄弟、頁級組件之間的傳值作淺談2023-12-12
Vue Router是Vue.js (opens new window)官方的路由管理器,它和 Vue.js 的核心深度集成,讓構建單頁面應用變得易如反掌,這篇文章主要給大家介紹了關于vue3使用vue-router的相關資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了詳解基于vue的移動web app頁面緩存解決方案，非常具有實用價值，需要的朋友可以參考下2017-08-08
web前端Vue報錯:Uncaught?(in?promise)?TypeError:Cannot?read?
這篇文章主要給大家介紹了關于web前端Vue報錯:Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue組件開發(fā)props驗證的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
詳解關于Vue2.0路由開啟keep-alive時需要注意的地方
這篇文章主要介紹了關于Vue2.0路由開啟keep-alive時需要注意的地方,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了Vue操作數組的幾種常用方法小結,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下2023-09-09
函數式組件就是沒有管理任何狀態(tài),也沒有監(jiān)聽任何傳遞給它的狀態(tài),也沒有生命周期方法,它只是一個接受一些 prop 的函數,下面這篇文章主要給大家介紹了關于Vue3封裝全局函數式組件方法的相關資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個函數、為什么new Vue里的data可以是一個對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08