Pinia のバージョン番号
"pinia": "^2.0.34"
エラーグラフ
エラーの理由
- Pinia を登録する前に pinia インスタンスにアクセスするとエラーが発生します。それは、発進する前に車を運転するようなもので、まったく走り去ることができません。
ピニアの例
piniaは公式サイトと同じmain.jsに登録されています（コードは掲載されなくなります）
piniaインスタンスを定義↓
src/store/userInfo.js
import {
defineStore } from 'pinia'
const useUserInfoStore = defineStore('userInfo', {
state: () => {
return {
userName: null,
logined: false,//是否登录
uid: null,
jianjie: null,
auth: null,//登录的token授权
showLoginForm: false,//显示登录/注册表单
musicPlayMode: 0,//音乐播放模式 0 列表播放 | 1 单曲循环 | 2 随机
}
},
persist: {
key: 'userInfo',
paths: ['userName', 'auth', 'uid', 'logined', 'showLoginForm', 'musicPlayMode'],
},
actions: {
setShowLoginForm() {
this.showLoginForm = !this.showLoginForm
}
}
})
export default useUserInfoStore
問題を解く
2つの状況があります
最初のケースでは、vue ファイル内の pinia インスタンスを使用します。
以下の例は問題なく普通に使えます
ビュー/Home.vue
<template>
</template>
<script setup>
// 导入pinia实例
import useUserInfoStore from '@/stores/userInfo'
//使用pinia实例
const userInfoStore = useUserInfoStore()
console.log(userInfoStore)
</script>
2 番目のケースでは、js/ts ファイル内の pinia インスタンスを使用します。
- たとえば、
src/common/test.jsPinia を使用してログイン ボタンをクリックすると、ログインが成功し、トークンがローカルに保存される例を作成します。 - ログインが成功し、バックエンドがトークンを返した場合
間違った使い方
- jsファイルを読み込む際はpiniaを登録しなくても利用できるため、エラーが報告されます。
- コードの 4 行目に注目してください
src/common/test.js
// 导入pinia实例
import useUserInfoStore from '@/stores/userInfo'
//使用pinia实例
const userInfoStore = useUserInfoStore()
console.log(userInfoStore)
//登录按钮的click事件
const loogin = ev =>{
// 假如这里有很多js代码 ..................
const token = '后端返回的toen'
// 登录成功，开始接收后端返回的toekn
userInfoStore.auth.value= token
}
正しい使い方
src/common/test.js
// 导入pinia实例
import useUserInfoStore from '@/stores/userInfo'
//登录按钮的click事件
const loogin = ev =>{
// 假如这里有很多js代码 ..................
//这里才开始使用pinia实例，因为在这里pinia已经完全初始化
const userInfoStore = useUserInfoStore()
console.log(userInfoStore)
const token = '后端返回的toen'
// 登录成功，开始接收后端返回的toekn
userInfoStore.auth.value= token
}
正しい使い方と間違った使い方のまとめ
- Pinia は vue ファイルで直接使用できます
- js/ts ファイルでは、pinia は業務処理時にのみ使用されます。たとえば、pinia インスタンスはボタンのクリック イベントで使用されます。
- js/ts ファイルの先頭で pinia を直接使用する場合、js/ts をロードするときに、pinia の登録が完了する前に pinia を使用すると、必ずエラーが報告されます。
- そのため、js/tsファイル内でpiniaインスタンスを使用する場合は、ボタンのクリックイベントなどの業務処理時に使用する必要があります。
しっぽ
実際、公式 Web サイトには、
公式 Web サイトのリンク - https://pinia.web3doc.top/core-concepts/outside-component-usage.html#%E5%8D%95%E9%A1%B5%E5が明確に記載されています。図に示すように、%BA%94% E7%94%A8%E7%A8%8B%E5%BA%8F
ピットの回避（侵入と削除）
-
インターネット上のピニア エラー レポート
was called but there was no active Pinia. Did you forget to install piniaの解決策は、ピニア ピットなど、非常に欺瞞的です。 -
回避坑１：https://blog.csdn.net/qq_37291367/article/details/129195604?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1- 129195604-blog-130828829.235%5Ev38%5Epc_relevant_sort_base3& Depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-129195604-blog-130828829.235% 5Ev38%5Epc_relevant_sort_base3&utm_relevant_index=1
-
回避坑２：https://blog.csdn.net/weixin_46054431/article/details/124769206
-
回避坑３：https://blog.csdn.net/zlting_/article/details/127495583
上記の解決策は非常に間違っていると思います