Pinia版本号
"pinia": "^2.0.34"
报错图
报错原因
- 在注册Pinia之前就访问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实例
如下例子,可以正常使用,没有问题
views/Home.vue
<template>
</template>
<script setup>
// 导入pinia实例
import useUserInfoStore from '@/stores/userInfo'
//使用pinia实例
const userInfoStore = useUserInfoStore()
console.log(userInfoStore)
</script>
第二种情况 ,在js/ts文件中使用pinia实例
- 例如我在
src/common/test.js
中使用Pinia,做一个点击登录按钮,且登录成功并将token保存到本地的例子 - 假如已经登录成功,且后端已返回token
错误的用法
- 一定会报错,因为在加载该js文件时,可能pinia都还没有注册就使用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
}
正确用法 vs 错误用法小结
- vue文件中可以直接使用pinia
- js/ts文件中,要在处理业务时才使用pinia,例如点击一个按钮的click事件里使用pinia实例.
- 直接在js/ts文件顶部使用pinia时,在加载该js/ts时,pinia还没有注册完成就使用pinia会肯定报错
- 所以js/ts文件里使用pinia实例时,必须在处理业务时使用,比如按钮的click事件里
尾
其实官网说的很清楚
官网链接 - 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, 如图
避坑记(侵删)
-
网上的pinia报错
was called but there was no active Pinia. Did you forget to install pinia
解决方式真是坑人,例如pinia坑扫描二维码关注公众号,回复: 15906787 查看本文章 -
避坑1: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
-
避坑2:https://blog.csdn.net/weixin_46054431/article/details/124769206
-
避坑3:https://blog.csdn.net/zlting_/article/details/127495583
我认为以上解决方式是极度错误的